CSS Advanced

CSS object-fit

The object-fit property tells the browser how an image or video should be resized to fit its container. It is the key to responsive images that fill a box without distortion. This guide covers every value with side-by-side live examples.

The object-fit Property

When you give an image a fixed width and height that do not match its natural aspect ratio, the image is normally stretched and looks distorted. object-fit changes that behaviour, letting you crop or letterbox instead of squashing. It applies to replaced elements such as img and video.

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

The Values

Value	Behaviour	Aspect ratio
fill	Stretches to fill the box exactly (default)	Not preserved
contain	Scales to fit fully inside; may letterbox	Preserved
cover	Scales to fill the box; crops overflow	Preserved
none	Keeps natural size; may overflow or leave gaps	Preserved
scale-down	Smaller of none and contain	Preserved

Compare the Values

Each box below is the same size but uses a different object-fit value on the same image. Watch how fill distorts while cover crops and contain letterboxes.

Run this — five object-fit values

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  figure { margin: 0; text-align: center; font: 12px sans-serif; }
  figure img {
    width: 100%;
    height: 110px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
  }
  .fill { object-fit: fill; }
  .contain { object-fit: contain; }
  .cover { object-fit: cover; }
  .none { object-fit: none; }
  .sd { object-fit: scale-down; }
</style>
</head>
<body>
  <div class="grid">
    <figure><img class="fill" src="https://picsum.photos/id/1080/400/200" alt=""><figcaption>fill</figcaption></figure>
    <figure><img class="contain" src="https://picsum.photos/id/1080/400/200" alt=""><figcaption>contain</figcaption></figure>
    <figure><img class="cover" src="https://picsum.photos/id/1080/400/200" alt=""><figcaption>cover</figcaption></figure>
    <figure><img class="none" src="https://picsum.photos/id/1080/400/200" alt=""><figcaption>none</figcaption></figure>
    <figure><img class="sd" src="https://picsum.photos/id/1080/400/200" alt=""><figcaption>scale-down</figcaption></figure>
  </div>
</body>
</html>

💡

object-fit: cover is the go-to value for responsive thumbnails, hero images and avatars. It always fills the box neatly, cropping the excess instead of distorting.

Fixing a Distorted Avatar

Run this — a perfectly round avatar

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #6366f1;
  }
</style>
</head>
<body>
  <img class="avatar" src="https://picsum.photos/id/1005/300/200" alt="User avatar">
</body>
</html>

⚠️

object-fit has no effect on elements whose display is not that of a replaced element. It works on img and video, not on a div background — use background-size for backgrounds.

Key points

object-fit controls how a replaced element fills a box with a fixed size.
fill is the default and distorts; cover and contain preserve the aspect ratio.
cover crops to fill the box; contain letterboxes to fit fully inside.
Combine object-fit: cover with border-radius for clean round avatars.
For div backgrounds use background-size, not object-fit.