Responsive Images

Images should shrink to fit narrow layouts without becoming distorted or obscuring essential subjects.

What you’ll learn

Prevent images from overflowing a content box.
Preserve image aspect ratio.
Distinguish cover from contain and HTML srcset.

Understand the concept

max-width: 100%; height: auto allows an inline image to shrink while keeping its intrinsic aspect ratio. For a fixed-shape thumbnail, width:100%; aspect-ratio:16/9; object-fit:cover fills the frame and may crop the edges.

Responsive file selection with srcset and sizes is an HTML feature, not a CSS property. Always provide meaningful alt text for informative images.

What the browser evaluates

Contain shows an entire source image inside a shape; cover fills the shape by cropping when the aspect ratios differ.

Keep the whole image visible

Make an SVG demonstration image scale without distortion.

HTML

<figure class="photo-card"><img alt="Illustrated hills beneath a pale sky" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 260'%3E%3Crect width='600' height='260' fill='%23bfdbfe'/%3E%3Cpath d='M0 230L170 65 290 180 415 95 600 240V260H0Z' fill='%2310b981'/%3E%3Ccircle cx='493' cy='56' r='26' fill='%23f59e0b'/%3E%3C/svg%3E"><figcaption>Hill landscape</figcaption></figure>

CSS

.photo-card { max-width: 380px; margin: 0; } .photo-card img { display: block; max-width: 100%; height: auto; } .photo-card figcaption { font-size: 13px; margin-top: 6px; }

Rendered output

Illustrated hills beneath a pale sky — Hill landscape

Observe: The source image scales to the container, preserving its proportions.

Crop into a uniform thumbnail

Use a 16:9 slot with object-fit: cover.

HTML

<figure class="photo-card"><img alt="Illustrated hills beneath a pale sky" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 260'%3E%3Crect width='600' height='260' fill='%23bfdbfe'/%3E%3Cpath d='M0 230L170 65 290 180 415 95 600 240V260H0Z' fill='%2310b981'/%3E%3Ccircle cx='493' cy='56' r='26' fill='%23f59e0b'/%3E%3C/svg%3E"><figcaption>Hill landscape</figcaption></figure>

CSS

.photo-card { max-width: 380px; margin: 0; } .photo-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; } .photo-card figcaption { font-size: 13px; margin-top: 6px; }

Rendered output

Observe: The frame has a predictable shape; image edges may be cropped.

Explain the result

Contain shows an entire source image inside a shape; cover fills the shape by cropping when the aspect ratios differ.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

Common mistakes to avoid

Setting both width and height arbitrarily can stretch an image.
Cropping an image should not cut out information necessary to understand it.

Try it yourself

Set object-fit: contain with a background on the image and compare unused space.

Before changing the code, predict what will change. Then verify by checking the rendered result.

What you should remember

Use responsive sizing for informative images and intentional cropping for decorative thumbnails.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.

Reaching the recap and completing the quizzes are separate milestones.

Next lesson: Responsive Flexbox and Grid →

Responsive Images