Responsive Images and Media in CSS

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Intrinsic size

An image's natural width and height, from the file itself.

Aspect ratio

Width divided by height, like 16:9 or 3:2. It describes the shape.

`max-width: 100%`

"Never wider than my container": the image can shrink but never overflow.

Layout shift (CLS)

Content jumping as images load. CLS (Cumulative Layout Shift) is the browser's score for it.

Replaced element

An element whose content comes from outside CSS, such as <img>, <video>, <iframe> or <canvas>.

`object-fit`

How a replaced element's content fills its box: fill, contain, cover, none or scale-down.

`object-position`

Which part of the image stays in view, or where it sits inside its box.

Letterboxing

Empty bands around a picture that has been shrunk to fit a box of another shape.

1. 1

   Remove height: auto

   In the first example, delete height: auto. Predict the drawn size (the height="400" attribute now wins: 240 × 400, a squashed image). Run and check, then put it back.

2. 2

   Change the box shape

   In the object-fit example, change the images to width: 150px; height: 60px. Predict which values now crop and which show bands.

3. 3

   A different ratio

   In the last example, change the video to aspect-ratio: 4 / 3. Predict the height for a 240px width (180px) and check the console.

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   An image has an intrinsic size: its natural width and height in pixels, for example 1200 × 800. Its aspect ratio is width divided by height, here 3:2 (1.5). By default an <img> is drawn at its intrinsic size, so a 1200px photo on a 390px phone sticks out and makes the page scroll sideways. The fix is two lines: img { max-width: 100%; height: auto; }. max-width: 100% means "never wider than my container" (it can still be smaller), and height: auto recalculates the height from the aspect ratio, so the image shrinks without being squashed.

2. 2

   Always write width and height attributes in the HTML (<img src="…" width="1200" height="800" alt="…">). Browsers turn them into a default aspect-ratio: auto 1200 / 800, so they can reserve the right amount of space before the image downloads. Combined with height: auto in CSS, the image is still fluid, and the text below doesn't jump when it loads. That jump is called layout shift, measured as CLS (Cumulative Layout Shift), one of Google's Core Web Vitals.

3. 3

   Images are inline elements by default (Phase 5, Topic 5.4), so they sit on the text baseline and leave a few pixels of gap below them for letter descenders (the tails of g, p, y). Inside cards this shows as a mysterious strip under the picture. A common reset adds display: block to images, which removes the gap; vertical-align: middle also works.

4. 4

   The aspect-ratio property (Phase 5, Topic 5.5) gives any box a shape: aspect-ratio: 16 / 9 with width: 100% makes the height follow the width. It's perfect for video embeds and <iframe>s, which don't have an intrinsic ratio CSS knows about, for placeholders, and for making every card thumbnail the same shape. If the content is taller than the ratio allows, a normal box grows to fit it, because its min-height is auto; set overflow: hidden or min-height: 0 if you want the ratio to win.

5. 5

   When an image's box has a different shape from the image itself, object-fit decides how the picture fills it. fill (the default) stretches it to the box, squashing it. contain shrinks it to fit entirely inside, leaving empty bands (letterboxing). cover fills the whole box and crops what sticks out. none keeps the intrinsic size and crops. scale-down uses whichever of none or contain gives the smaller picture. object-position chooses which part is kept when cropping or where the image sits: the default is 50% 50% (centre); top or 30% 20% keeps a face in view. These work on <img>, <video> and other replaced elements (elements whose content comes from outside the CSS, such as images, video and canvas).

6. 6

   CSS can't choose which file to download for a screen; that is HTML's job with srcset, sizes and <picture> (see the /html course, Phase 5). CSS only controls how a downloaded image is displayed. For CSS background images, background-size: cover is the background equivalent of object-fit: cover (Phase 5, Topic 5.8), and image-set() offers resolution choices. Use <img> for meaningful pictures (they get alt text and lazy loading) and backgrounds for decoration.

• ↔

  object-fit: cover gives tidy, same-shape grids but can crop important content; contain shows everything but leaves uneven bands.

• ↔

  A display: block reset for images removes the baseline gap everywhere, but images that should sit inside a line of text (like small icons) then need display: inline back.

• I add max-width: 100%; height: auto to images and video.

• I keep width and height attributes to prevent layout shift.

• I can use aspect-ratio for embeds, placeholders and thumbnails.

• I can choose between fill, contain, cover, none and scale-down.

• I can keep the subject in view with object-position.

• I know that choosing which image file to load is HTML's job (srcset).