Image sizing basics in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an image with a width of 200 pixels.

HTML

<img src="flower.jpg" alt="A red flower" width="[1]">

Drag options to blanks, or click blank then click option'

A200

B100%

Cauto

D50vw

Attempts:

3 left

💡 Hint

Common Mistakes

Using percentages or units like 'vw' inside the width attribute (which expects pixels).

Leaving the width attribute empty.

The width attribute sets the image width in pixels. Here, 200 means 200 pixels wide.

2fill in blank

medium

Complete the CSS code to set the image height to 150 pixels.

HTML

img {
  height: [1];
}

Drag options to blanks, or click blank then click option'

Aauto

B150

C15em

D150px

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting units like 'px' in CSS size values.

Using 'auto' which lets the browser decide the height.

In CSS, you must specify units like px for pixel sizes. So 150px sets height to 150 pixels.

3fill in blank

hard

Fix the error in the HTML to make the image width 300 pixels.

HTML

<img src="tree.jpg" alt="A tall tree" width="[1]">

Drag options to blanks, or click blank then click option'

Aauto

B300px

C300

D100%

Attempts:

3 left

💡 Hint

Common Mistakes

Adding 'px' units inside the width attribute in HTML.

Using percentage values in the width attribute.

The width attribute in HTML expects a number only, without units. So use 300, not 300px.

4fill in blank

hard

Fill both blanks to set the image width to 100 pixels and height to auto in CSS.

HTML

img {
  width: [1];
  height: [2];
}

Drag options to blanks, or click blank then click option'

A100px

Bauto

C150px

D50%

Attempts:

3 left

💡 Hint

Common Mistakes

Setting both width and height to fixed pixel values causing stretched images.

Using percentages for height which may distort the image.

Setting width to 100px fixes the width. Setting height to auto keeps the image's natural height ratio.

5fill in blank

hard

Fill all three blanks to create a responsive image that fills its container width but keeps its aspect ratio.

HTML

<img src="mountain.jpg" alt="A mountain" style="width: [1]; height: [2]; max-width: [3];">

Drag options to blanks, or click blank then click option'

A100%

Bauto

D300px

Attempts:

3 left

💡 Hint

Common Mistakes

Setting fixed pixel widths that break responsiveness.

Setting height to a fixed pixel value causing distortion.

Setting width to 100% makes the image fill its container's width. Height auto keeps the aspect ratio. Max-width 100% prevents the image from growing larger than its container.