What is Image sizing basics in HTML?

HTMLmarkup~5 mins

Image sizing basics in HTML

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Images need to fit well on your webpage. Sizing helps control how big or small images appear so your page looks nice and loads well.

You want a logo to stay small and neat in the header.

You need a photo to fill a space without stretching weirdly.

You want images to look good on phones and computers.

You want to keep page loading fast by not showing huge images.

You want to keep the page layout balanced with images sized properly.

Syntax

HTML

<img src="image.jpg" alt="Description" width="100" height="50">

The width and height attributes set the image size in pixels.

You can also use CSS to control image size for more flexibility.

Examples

This sets the image width to 200 pixels. Height adjusts automatically to keep the shape.

HTML

<img src="flower.jpg" alt="Red flower" width="200">

This sets the image height to 150 pixels. Width adjusts automatically.

HTML

<img src="cat.png" alt="Cute cat" height="150">

This sets both width and height exactly, which might stretch the image if proportions differ.

HTML

<img src="dog.jpg" alt="Happy dog" width="300" height="200">

This CSS makes the image shrink to fit its container but keeps its shape.

HTML

<style>img { max-width: 100%; height: auto; }</style>
<img src="landscape.jpg" alt="Beautiful landscape">

Sample Program

This page shows three images sized differently. The first uses the width attribute, the second uses height, and the third uses CSS to fit the container width while keeping shape.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Sizing Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
    }
    .container {
      max-width: 400px;
      border: 1px solid #ccc;
      padding: 1rem;
    }
    img {
      max-width: 100%;
      height: auto;
      display: block;
      margin-bottom: 1rem;
      border-radius: 0.5rem;
    }
  </style>
</head>
<body>
  <main class="container">
    <h1>Image Sizing Basics</h1>
    <p>Below are three images with different size settings:</p>
    <img src="https://via.placeholder.com/600x400" alt="Large placeholder image" width="300">
    <img src="https://via.placeholder.com/600x400" alt="Medium placeholder image" height="150">
    <img src="https://via.placeholder.com/600x400" alt="Full width placeholder image">
    <p>The first image is set to 300 pixels wide.</p>
    <p>The second image is set to 150 pixels tall.</p>
    <p>The third image uses CSS to fit the container width.</p>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Using only width or height keeps the image's natural shape.

Setting both width and height can stretch or squash the image if proportions don't match.

CSS sizing is better for responsive designs that work on phones and desktops.

Summary

Use width or height attributes to size images simply.

Use CSS for flexible, responsive image sizing.

Keep image proportions to avoid distortion.