Lesson 19 / 28

Responsive Images

Images that scale gracefully instead of overflowing their container.

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.