Make an image scale fluidly without exceeding its original size

What's really being asked

This question checks whether you know how replaced elements like images interact with their containers. Specifically, it probes your understanding of intrinsic dimensions, the difference between width and max-width, and how to preserve aspect ratios during responsive scaling.

The full answer

First, state the rule max-width: 100%. Explain that this caps the rendered width at the containing block's width, so the image scales down on small screens, but because no width value forces growth, the image never exceeds its own intrinsic width when the container is larger. Second, add height: auto. This tells the browser to compute the height from the intrinsic aspect ratio as the width changes, preventing distortion. Third, note that these rules are usually applied via a direct img selector or a utility class. Fourth, mention that max-width overrides width if they conflict, but min-width overrides max-width, so avoid mixing in min-width: 100% or width: 100% which would break the constraint.

The mistakes people make

Proposing width: 100% is the most frequent error. That makes the image always fill its container, which violates the requirement to stay at or below original size. Another mistake is omitting height: auto, which leaves the default height attribute or CSS height in place and causes the image to squash or stretch vertically. Some candidates suggest max-width in pixels, but without knowing the image's natural width this is fragile and not fluid. A fourth red flag is mentioning object-fit: cover or contain, which solves cropping and fitting problems but does not prevent upscaling beyond intrinsic size.

What usually comes next

An interviewer might ask what happens if you also set width: 100% alongside max-width: 100%. They might ask how you would handle images that need to fill a grid cell exactly, or how srcset and sizes interact with these CSS rules. They may also ask about the performance implications of scaling down a large intrinsic image versus serving multiple resolutions.

A concrete example

Imagine a product photo with a natural width of 800 pixels placed inside an article that can be 1200 pixels wide on desktop or 320 pixels wide on mobile. With max-width: 100% and height: auto, the photo renders at 800 pixels on desktop because its intrinsic width is smaller than the container. On mobile it scales to 320 pixels wide and the height adjusts to maintain the aspect ratio. If you had used width: 100% instead, the photo would blow up to 1200 pixels on desktop, becoming blurry and consuming unnecessary layout space.