Detailed explanation
A responsive image adapts to its container without becoming distorted. The key distinction is whether you want to preserve the image’s original proportions or display it inside a consistently shaped thumbnail. For the original proportions, use `img { display: block; width: 100%; height: auto; }`. The width follows the container, while the browser calculates the height from the image’s intrinsic aspect ratio. If small images should not be enlarged, use `max-width: 100%; height: auto;` instead of forcing `width: 100%`.
To reserve space before the image loads, include accurate HTML dimensions, such as `<img src="photo.jpg" width="1200" height="800" alt="Mountain landscape">`, together with responsive CSS. Modern browsers use these attributes to establish an initial aspect ratio, while CSS can still change the displayed dimensions. This helps prevent cumulative layout shift: the surrounding content does not need to jump when the browser discovers the image’s dimensions. The attributes describe intrinsic dimensions; they do not require the image to remain that size on screen.
For uniformly shaped thumbnails, use `.thumbnail { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }`. Here, `aspect-ratio` establishes the image element’s preferred box proportions, and its automatic height is calculated from the available width. `object-fit: cover` scales the image content proportionally until it fills that box, cropping any overflow rather than stretching it. Use `object-position` to control which part stays visible. If the whole image must remain visible, choose `object-fit: contain`, accepting empty space when the source and box ratios differ.
Under the hood, sizing the element’s box and fitting the image content are separate operations. `aspect-ratio` participates in layout, whereas `object-fit` controls how the replaced content is drawn inside the resulting box. At least one dimension must be automatic for the preferred ratio to determine that dimension; explicitly fixing both width and height overrides this sizing relationship. Interviewers usually look for this distinction, correct handling of cropping versus distortion, and awareness that responsive sizing alone does not necessarily reserve space before loading.
Key points to remember
- Use `width: 100%; height: auto` to scale an image with its original proportions.
- Use accurate HTML `width` and `height` attributes to reserve space before loading.
- Use `aspect-ratio: 16 / 9` for a consistent thumbnail box with an automatic height.
- Use `object-fit: cover` for proportional cropping or `contain` for full visibility.
- Treat element sizing and image-content fitting as separate responsibilities.
Common mistakes candidates make
- Setting arbitrary width and height values without `object-fit`, which can stretch the image.
- Assuming `object-fit: cover` establishes a box size or reserves space by itself.
- Expecting `aspect-ratio` to control dimensions when both width and height are explicitly fixed.
Likely follow-up questions
What is the difference between `cover` and `contain`?
`cover` fills the entire image box while preserving the source ratio, so some content may be cropped. `contain` preserves the complete image but can leave empty space inside the box.
Do HTML width and height attributes stop an image from being responsive?
No; CSS can override its displayed dimensions using `width: 100%; height: auto`. Accurate attributes also provide an initial aspect ratio so the browser can reserve space before loading.
How do `srcset` and `sizes` relate to responsive images?
CSS controls the image’s displayed size, while `srcset` and `sizes` help the browser select an appropriate image resource. With width-descriptor candidates, `sizes` describes the expected display width, helping avoid unnecessarily large downloads.
Interview tip: Explain the natural-ratio solution first, then show the fixed-ratio thumbnail solution and state its cropping trade-off.