CSS object-fit Explained: Resize Images Without Stretching

You have a grid of cards, each with an image, and the photos are all different shapes. Set them to the same width and height and some get squashed. This is the problem CSS object-fit was designed to solve.

The problem

If you force an image into a box with a different aspect ratio using fixed width and height, the browser stretches it to fit. People look wider or thinner than they are. The ratio matters, as explained in what is aspect ratio.

The fix: object-fit

.card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

With object-fit: cover, the image keeps its proportions and scales until it completely fills the box, trimming whatever overflows. No distortion, no gaps.

The values

cover: fills the whole box, crops the extra. Best for cards, thumbnails and banners.
contain: fits the whole image inside the box, leaving empty space if the shapes differ. Best when nothing can be cut off, like product images or logos.
fill: the default. Stretches to fit and distorts. Usually not what you want.
none: shows the image at its natural size, cropped by the box.
scale-down: behaves like none or contain, whichever results in a smaller image.

Choose which part stays visible

By default, cover crops from the center. If your subject is near the top, like a person’s face in a portrait, adjust with object-position:

.card img {
  object-fit: cover;
  object-position: top;
}

You can also use percentages, such as object-position: 50% 20%.

Let the browser hold the shape with aspect-ratio

.card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

This tells the browser the box should always be 16:9, no matter how wide it becomes. It’s tidier than a fixed pixel height, which looks different at different screen widths.

Important: this doesn’t shrink the file

CSS only changes how the image is displayed. A 5 MB photo shown in a small card is still a 5 MB download. For genuine savings, resize the actual file, then use object-fit for layout. See image dimensions vs file size and setting width and height in HTML.

Be careful with cropped content

Cover trims the edges, so a wide group photo in a square card might lose people on the sides. For content like that, use contain or choose better source images. Making thumbnails with a deliberate crop is covered in how to make thumbnails for a website.

Browser support

Object-fit is supported by all modern browsers, so it’s safe to use without workarounds.

Quick recipe for card grids

Resize images to about double the card width.
Set width: 100% and a consistent aspect-ratio.
Add object-fit: cover.
Tweak object-position if faces get cut.

Get the files themselves to the right size with our online image resizer before styling them.