Setting an <img> to a fixed width and height stretches it. The CSS object-fit property fixes that by controlling how the image fills its box.

The values

  • cover — fills the box, cropping the overflow. No distortion; best for thumbnails and hero images.
  • contain — fits the whole image inside, leaving empty space. No cropping; good for logos.
  • fill (default) — stretches to fit. This is the one that distorts — usually avoid it.

Example

img { width: 300px; height: 200px; object-fit: cover; }

Tip

object-fit only changes display — the file is unchanged. To actually change the pixels, crop or resize. Related: aspect ratios.