"Responsive images" covers two genuinely different problems that are easy to conflate: making an image fit its container correctly with CSS, and serving the right file for a given screen with HTML. This page focuses on the CSS side — sizing, cropping, and preventing layout shift — and clarifies where the HTML-side mechanism takes over.

Without any CSS, an <img> renders at its natural pixel dimensions, happily overflowing a narrower container. The single most important responsive-image rule fixes that in one line:

max-width: 100% lets the image shrink to fit a narrow container while never exceeding its own natural size — it won't stretch a small image larger than it actually is. height: auto is essential alongside it; without it, the image's height stays fixed while its width shrinks, distorting the aspect ratio.

Once an image has to fill a container with a fixed size or aspect ratio (a thumbnail grid, a hero banner), max-width: 100% alone isn't enough — you need control over how the image crops or letterboxes. See the full breakdown on the object-fit & object-position page; the short version:

Images that load asynchronously collapse to zero height until they arrive, then suddenly push the rest of the page down — a major contributor to poor Cumulative Layout Shift scores. Recap: aspect-ratio reserves the image's final space immediately, before the file has even downloaded.

Setting width and height attributes in the HTML (even though CSS overrides the rendered size) gives the browser the image's intrinsic aspect ratio before any CSS or the image file itself has loaded — modern browsers use these attributes to compute a default aspect-ratio automatically, which is a good belt-and-suspenders habit even when you also set aspect-ratio explicitly in CSS.