How to make an image responsive

Short answer

max-width: 100% keeps the image within its parent, height: auto preserves the proportions:

<div style="width: 240px; border: 1px dashed silver;">
  <img src="/media/photo-800x500.jpg" alt="A flower" width="800" height="500" style="max-width: 100%; height: auto;">
</div>

This rule is usually set for all images of a site at once: img { max-width: 100%; height: auto; }.

Why the width and height attributes

The width and height attributes in HTML tell the browser the image proportions before it loads. The browser reserves the space in advance, and the text below does not jump when the image appears. CSS still controls the final size.

Stretching to the full width

If the image must fill the whole block even in a wide container, use width: 100% instead of max-width:

<img src="/media/photo-600x200.jpg" alt="A banner" width="600" height="200" style="width: 100%; height: auto; border-radius: 8px;">

To serve files of different sizes for different screens, see the article about srcset.

Common mistake

max-width: 100% is set, but height: auto is forgotten. The width shrinks, while the height from the height attribute stays the same — the image gets stretched vertically:

<div style="width: 240px;">
  <img src="/media/photo-800x500.jpg" alt="A flower" width="800" height="500" style="max-width: 100%;">
</div>