Image sizing basics in HTML

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>

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.

Practice

1. Which HTML attribute is used to set the width of an image directly in the tag?

easy

A. width

B. size

C. length

D. scale

Solution

1. Step 1: Identify image sizing attributes

   The width attribute is used in the <img> tag to set the image width in pixels or percentage.

2. Step 2: Confirm correct attribute name

   Among the options, only width is a valid HTML attribute for image sizing.

3. Final Answer:

   width -> Option A

4. Quick Check:

   Image width attribute = width [OK]

Hint: Use width or height attributes for quick sizing [OK]

Common Mistakes:

• Confusing size with width
• Using CSS property names as HTML attributes
• Trying to use scale which is not valid

2. Which of the following is the correct way to set an image width to 200 pixels in HTML?

easy

A. <img src='photo.jpg' width='200px'>

B. <img src='photo.jpg' style='width: 200'>

C. <img src='photo.jpg' width='200'>

D. <img src='photo.jpg' height='200px'>

Solution

1. Step 1: Understand HTML attribute value format

   In HTML, the width attribute expects a number representing pixels without units.

2. Step 2: Check each option

   <img src='photo.jpg' width='200px'> uses '200px' which is invalid for the width attribute. <img src='photo.jpg' width='200'> correctly uses '200' without units. <img src='photo.jpg' style='width: 200'> uses CSS syntax incorrectly inside an attribute. <img src='photo.jpg' height='200px'> sets height, not width.

3. Final Answer:

   <img src='photo.jpg' width='200'> -> Option C

4. Quick Check:

   Width attribute value is number only [OK]

Hint: Use numbers only for width/height attributes, no units [OK]

Common Mistakes:

• Adding 'px' units inside width or height attributes
• Confusing CSS style syntax with HTML attributes
• Setting height instead of width by mistake

3. What will be the visual result of this HTML code?

<img src='flower.jpg' width='150' height='100'>

medium

A. Image not shown due to invalid attributes

B. Image shown with width 150px and height 100px, possibly distorted

C. Image shown with height 100px, width auto to keep ratio

D. Image shown with width 150px, height auto to keep ratio

Solution

1. Step 1: Understand width and height attributes together

   When both width and height are set, the image is forced to those exact dimensions, ignoring original proportions.

2. Step 2: Predict visual effect

   Because the original image ratio may differ, forcing both width and height can distort the image shape.

3. Final Answer:

   Image shown with width 150px and height 100px, possibly distorted -> Option B

4. Quick Check:

   Both width and height set = fixed size, possible distortion [OK]

Hint: Setting both width and height fixes size, may distort image [OK]

Common Mistakes:

• Assuming height auto adjusts when both attributes set
• Thinking image keeps original ratio automatically
• Believing invalid attributes cause image not to show

4. Identify the error in this HTML code for sizing an image:

<img src='cat.png' width='300' height='auto'>

medium

A. Using 'auto' in height attribute is invalid in HTML

B. Using '300' without units in width attribute is invalid

C. Missing closing slash in <img> tag

D. No error, code is correct

Solution

1. Step 1: Check width attribute value

   The width attribute correctly uses the number '300' without units.

2. Step 2: Check height attribute value

   Height attribute does not accept 'auto' as a value in HTML attributes; it only accepts numbers.

3. Final Answer:

   Using 'auto' in height attribute is invalid in HTML -> Option A

4. Quick Check:

   Height attribute must be number, not 'auto' [OK]

Hint: Height and width attributes accept only numbers, no 'auto' [OK]

Common Mistakes:

• Using CSS values like 'auto' in HTML attributes
• Thinking <img> needs closing slash in HTML5
• Thinking width attribute requires 'px' units

5. You want an image to always fill the width of its container but keep its height proportional. Which CSS style should you use?

hard

A. width: auto; height: auto;

B. width: auto; height: 100%;

C. width: 100px; height: 100px;

D. width: 100%; height: auto;

Solution

1. Step 1: Understand responsive image sizing

   Setting width: 100% makes the image fill the container's width.

2. Step 2: Maintain aspect ratio

   Setting height: auto lets the browser calculate height to keep the image's original proportions.

3. Final Answer:

   width: 100%; height: auto; -> Option D

4. Quick Check:

   Width 100% + height auto = responsive proportional image [OK]

Hint: Use width 100% and height auto for proportional responsive images [OK]

Common Mistakes:

• Setting fixed height breaks aspect ratio
• Using auto width with fixed height distorts image
• Setting both width and height fixed loses responsiveness