Responsive images in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the image responsive by setting its width to 100%.

CSS

img {
  width: [1];
}

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

Aauto

B100px

C100%

D50%

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed pixel widths like 100px makes the image not responsive.

Using 'auto' for width does not guarantee responsiveness.

Setting width: 100% makes the image scale to the width of its container, making it responsive.

2fill in blank

medium

Complete the code to ensure the image keeps its aspect ratio by setting the height to auto.

CSS

img {
  width: 100%;
  height: [1];
}

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

A0

Bauto

C100%

Dinherit

Attempts:

3 left

💡 Hint

Common Mistakes

Setting height to 100% can distort the image.

Using 0 for height hides the image.

Setting height: auto keeps the image's original aspect ratio when the width changes.

3fill in blank

hard

Fix the error in the CSS to make the image responsive and not overflow its container.

CSS

img {
  max-width: [1];
  height: auto;
}

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

A100%

B100px

Cauto

D50%

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed pixel values for max-width can cause overflow.

Setting max-width to auto does not limit the image size.

Using max-width: 100% ensures the image never grows larger than its container, keeping it responsive.

4fill in blank

hard

Fill both blanks to create a responsive image that scales with its container and keeps aspect ratio.

CSS

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

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

A100%

Bauto

C50%

Dinherit

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed height values can distort the image.

Setting width to auto does not make the image responsive.

Setting width: 100% makes the image fill its container width, and height: auto keeps the aspect ratio.

5fill in blank

hard

Fill all three blanks to create a responsive image with a max width, automatic height, and block display.

CSS

img {
  display: [1];
  max-width: [2];
  height: [3];
}

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

Ainline

Bauto

C100%

Dblock

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'inline' display causes unwanted spacing.

Setting max-width to fixed pixels can break responsiveness.

Using fixed height distorts the image.

Setting display: block removes inline spacing, max-width: 100% limits image size to container, and height: auto keeps aspect ratio.