CSS Object Fit

The object-fit property controls how an image or video fills its container when the container and the media have different aspect ratios. Without it, images stretch or squish to fit their box. With it, you decide exactly how the content scales and crops.

The Problem Without object-fit

DIAGRAM — Stretched image problem:

Original photo (landscape):   [ ██ wide ██ ]

Forced into a square box without object-fit:
┌──────┐
│ █ ** │  ← image is squished vertically,
│ █ ** │    faces look distorted
└──────┘

Set a fixed height and width on an image and the browser stretches it to fill both dimensions. This distorts the image. object-fit solves this.

Syntax

img {
  width: 300px;
  height: 200px;
  object-fit: cover; /* or contain, fill, none, scale-down */
}

The container (the width and height you set) stays fixed. object-fit decides what happens to the media inside it.

The Five Values

fill (default)

Stretches the image to fill the box completely. Aspect ratio is not preserved. The image may distort.

img { object-fit: fill; }

DIAGRAM — fill:

Container: ┌────────────────┐
           │ ████ stretched │  ← fills 100% width AND height
           │ █ distorted  █ │    aspect ratio is lost
           └────────────────┘

cover

Scales the image to fill the entire container while keeping the aspect ratio. The image is cropped on the sides or top/bottom to fit — nothing is distorted.

img { object-fit: cover; }

DIAGRAM — cover:

Full photo:  [─────── wide photo ───────]
                ↑ the sides get cropped

Container:  ┌──────────┐
            │ ████████ │  ← fills box completely
            │ ████████ │  ← aspect ratio intact
            └──────────┘  ← sides cropped off

Best for: Profile pictures, card thumbnails, hero images — anywhere you want a clean filled area with no distortion.

contain

Scales the image to fit entirely inside the container while keeping the aspect ratio. The image is never cropped, but empty space (letterboxing) may appear on the sides or top/bottom.

img { object-fit: contain; }

DIAGRAM — contain:

Full photo:  [─────── wide photo ───────]

Container:  ┌──────────────────┐
            │                  │  ← empty space (top and bottom)
            │ ████████████████ │  ← full image, not cropped
            │                  │  ← empty space
            └──────────────────┘

Best for: Product images, logos, diagrams — where showing the full content matters more than filling the box.

none

The image keeps its natural size. If it is bigger than the container, it overflows and gets cropped. No scaling happens at all.

img { object-fit: none; }

scale-down

Behaves like contain or none, whichever results in a smaller size. If the image is smaller than the container, it stays at its natural size (no upscaling). If it is larger, it scales down to fit.

img { object-fit: scale-down; }

Comparing All Values

DIAGRAM — All values in a 200×150px container, image is 400×200px:

fill:       ████████  ← fills, aspect ratio broken (distorted)
            ████████

cover:      ████████  ← fills, sides cropped, ratio intact
            ████████

contain:    ░░████░░  ← fits inside, gaps on sides, ratio intact
            ░░████░░

none:       ████████  ← original size, overflows container
            ████████...

scale-down: ░░████░░  ← same as contain when image is larger
            ░░████░░

object-position

When using cover or none, the image gets cropped. object-position controls which part of the image stays visible. The default is center center.

/* Keep the top of the image visible (useful for portraits) */
img {
  object-fit: cover;
  object-position: top;
}

/* Focus on the right side */
img {
  object-fit: cover;
  object-position: right center;
}

/* Custom coordinates */
img {
  object-fit: cover;
  object-position: 30% 20%;
}

DIAGRAM — object-position on a portrait photo:

Photo of a person (head at top):
┌─────────────┐
│    😊 head  │  ← we want to keep the face visible
│    body     │
│    feet     │
└─────────────┘

object-fit: cover + object-position: top:
┌────────────┐
│   😊 head  │  ← face stays visible, bottom is cropped
│   body     │
└────────────┘

object-fit: cover + object-position: bottom:
┌────────────┐
│   body     │  ← bottom stays, face is cropped off
│   feet     │
└────────────┘

Works on Video Too

object-fit applies to <video> elements the same way.

video {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

Practical Examples

Uniform Product Image Grid

.product-grid img {
  width: 100%;
  height: 250px;
  object-fit: contain;  /* full product, no cropping */
  background: #f5f5f5;
}

Profile Avatars

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
}

Card Thumbnail

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

Background-style Video

.bg-video {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
}

Quick Reference

object-fit: cover and object-fit: contain are the two values you will use most often. Cover for visual impact, contain for full-content clarity. Pair either one with object-position to control the crop point precisely.