The CSS object-fit property

Q: How do I stop an image from stretching in CSS?

Set object-fit: cover (or contain) on the image. The default, fill, distorts the image to match the box; cover keeps its proportions and crops instead.

Q: What is the difference between cover and contain?

cover fills the whole box and crops any overflow; contain fits the entire image inside the box and may leave empty space. Both keep the aspect ratio.

Q: Does object-fit work on background images?

No — it works on replaced elements like and . For a background image, use background-size: cover instead.

Q: How do I control which part of the image is cropped?

Use object-position, e.g. object-position: top, to choose which area stays in frame when cover crops the rest.

Property CSS All modern browsers Updated June 22, 2026

Quick answer

The CSS object-fit property controls how an image or video fills its box. cover scales it to fill the box and crops the overflow (no distortion); contain fits the whole thing inside, leaving gaps; fill (the default) stretches it. It is the standard fix for images that look squashed when given a fixed width and height.

Overview

object-fit solves one of the most common image problems on the web: you give an <img> a fixed width and height to make a tidy grid, and every photo that is not exactly that ratio comes out stretched and squashed. The reason is the default value, fill, which warps the image to match the box.

Switch to cover and the image scales up until it fills the box completely while keeping its proportions, cropping whatever spills over the edges — exactly how a thumbnail or avatar should behave. Switch to contain and it scales down until the whole image fits inside, which may leave empty bands at the sides but never crops anything, ideal for logos where you cannot lose any part.

It works on replaced elements — images, videos, embeds — not ordinary boxes. Its partner object-position lets you choose which part stays in frame when cover crops, so you can keep a subject's face centered instead of accepting the default middle.

Syntax

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

Values

The object-fit property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value	Description
`fill`	Stretches the image to fill the box, ignoring its aspect ratio. The default.
`contain`	Scales the image to fit entirely inside the box, keeping its ratio (may leave gaps).
`cover`	Scales the image to cover the box, keeping its ratio (crops any overflow).
`none`	Keeps the image at its natural size, cropping or centering as needed.
`scale-down`	Uses whichever of none or contain produces the smaller image.

Example

Live example

<style>
  .row { display: flex; gap: 12px; font: 600 12px system-ui, sans-serif; text-align: center; }
  figure { margin: 0; }
  .row img { width: 120px; height: 120px; border-radius: 10px; display: block; }
  .fill img { object-fit: fill; }
  .cover img { object-fit: cover; }
  .contain img { object-fit: contain; background: #eef2ff; }
</style>
<div class="row">
  <figure class="fill"><img src="https://picsum.photos/200/300" alt=""><figcaption>fill</figcaption></figure>
  <figure class="cover"><img src="https://picsum.photos/200/300" alt=""><figcaption>cover</figcaption></figure>
  <figure class="contain"><img src="https://picsum.photos/200/300" alt=""><figcaption>contain</figcaption></figure>
</div>

Best practices

Use object-fit: cover for thumbnails and avatars so images fill the frame without stretching.
Use contain for logos and product shots where nothing can be cropped away.
Set object-position alongside cover to control which part of the image survives the crop.
Give the image an explicit width and height (or aspect-ratio) so the browser reserves space and the layout does not jump as it loads.

Frequently asked questions

How do I stop an image from stretching in CSS?

Set object-fit: cover (or contain) on the image. The default, fill, distorts the image to match the box; cover keeps its proportions and crops instead.

What is the difference between cover and contain?

cover fills the whole box and crops any overflow; contain fits the entire image inside the box and may leave empty space. Both keep the aspect ratio.

Does object-fit work on background images?

No — it works on replaced elements like <img> and <video>. For a background image, use background-size: cover instead.

How do I control which part of the image is cropped?

Use object-position, e.g. object-position: top, to choose which area stays in frame when cover crops the rest.

min-height opacity

References