Lesson 19 / 30

Responsive Images

Make images scale with max-width and height auto, and crop them cleanly with object-fit.

The one-line fix

max-width: 100% stops an image from overflowing its parent, while height: auto keeps its aspect ratio intact as it shrinks.

A universal image rule

Many projects add this globally, near the CSS reset.

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

object-fit for cropping

When an <img> has a fixed width/height, object-fit: cover crops it to fill the box without stretching — like background-size: cover but for <img> tags.