Responsive images

Make images responsive with max-width: 100%.

max-width: 100% on images

The simplest way to make an image responsive is max-width: 100%. It ensures the image never exceeds its container; it shrinks automatically on narrow screens.

img {
  max-width: 100%;
}

The percentage is relative to the container. The image never grows past its original size; it only shrinks when the container narrows. width: 100%, by contrast, always stretches the image to the container, which can hurt quality.

Why height: auto?

To keep the image from getting squished out of proportion when its width changes, add height: auto. The browser recalculates the height to preserve the aspect ratio.

img {
  max-width: 100%;
  height: auto;
}

Together these are the classic responsive image recipe: the image fits the container, shrinks on narrow screens, and never gets stretched to the wrong ratio.

Responsive image practice

Modern HTML lets you serve different image files for different screen sizes: <img srcset> and the <picture> element. CSS still works as a universal safety net:

img {
  max-width: 100%;
  height: auto;
}

Adding this as a base for every image on the site also prevents accidental horizontal scrolling.

Exercise A responsive image style for img

Add max-width: 100% and height: auto declarations to an img selector. The image should fit the container and keep its aspect ratio.

Show example solution

/* Fit the image to the container, keep its ratio */
img {
  max-width: 100%;
  height: auto;
}

Test yourself

What does img { max-width: 100% } do?
```
img {
  max-width: 100%;
}
```
- It always stretches the image to the container
- It shrinks the image below its original size
- It shows the image at a fixed 100px width
- It keeps the image inside the container and shrinks it when the container narrows
Show answer

It keeps the image inside the container and shrinks it when the container narrows — Correct. max-width: 100% fits the image to the container; when the container narrows, the image shrinks.

Complete the responsive image declaration

img {
  max-width: 100%;
  ____: auto;
}

Show answer

img {
  max-width: 100%;
  height: auto;
}

Match the image terms

max-width: 100%

Fit to container
height: auto

Keep aspect ratio
width: 100%

Always fill container
srcset

Serve different files

Next lesson: Summary - Responsive card

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies