CssConceptBeginner · 3 min read

What is object-fit in CSS: Explained with Examples

object-fit in CSS controls how an image or video fits inside its container when the container size differs from the media's natural size. It lets you decide if the media should fill, contain, or cover the container without distortion.

⚙️

How It Works

Imagine you have a photo frame that is a fixed size, but your photo is bigger or smaller than the frame. The CSS object-fit property tells the browser how to place and resize the photo inside that frame.

It works by adjusting the media's size and cropping behavior so it either stretches, fits inside, or covers the container area. This is similar to how you might zoom or crop a picture to fit a frame without changing its shape.

Using object-fit helps keep images and videos looking good and consistent, no matter the container size.

💻

Example

This example shows an image inside a fixed-size box using different object-fit values.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>object-fit Example</title>
<style>
  .container {
    width: 200px;
    height: 150px;
    border: 2px solid #333;
    margin-bottom: 20px;
    overflow: hidden;
  }
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .fill {
    object-fit: fill;
  }
  .contain {
    object-fit: contain;
    background: #eee;
  }
  .cover {
    object-fit: cover;
  }
  .none {
    object-fit: none;
  }
  .scale-down {
    object-fit: scale-down;
  }
</style>
</head>
<body>
  <div class="container">
    <img src="https://via.placeholder.com/300x200" alt="Fill example" class="fill" />
  </div>
  <div class="container">
    <img src="https://via.placeholder.com/300x200" alt="Contain example" class="contain" />
  </div>
  <div class="container">
    <img src="https://via.placeholder.com/300x200" alt="Cover example" class="cover" />
  </div>
  <div class="container">
    <img src="https://via.placeholder.com/300x200" alt="None example" class="none" />
  </div>
  <div class="container">
    <img src="https://via.placeholder.com/300x200" alt="Scale-down example" class="scale-down" />
  </div>
</body>
</html>

Output

Five 200x150 pixel boxes stacked vertically, each containing the same image sized differently: fill stretches the image to fill the box, contain fits the whole image inside with empty space, cover fills the box cropping edges, none shows original size with overflow hidden, scale-down shows smaller of none or contain.

🎯

When to Use

Use object-fit when you want images or videos to fit nicely inside containers without distortion. It is especially helpful for responsive designs where container sizes change.

Common cases include profile pictures, product images, thumbnails, or video players where you want consistent sizing but don't want to stretch or squash the media.

For example, object-fit: cover is great for background-style images that fill the space but crop edges, while object-fit: contain is good when you want the entire image visible with possible empty space.

✅

Key Points

object-fit controls how media fits inside a container.
Common values: fill, contain, cover, none, scale-down.
Prevents distortion by preserving aspect ratio.
Works only on replaced elements like <img> and <video>.
Helps create responsive, visually consistent layouts.

✅

Key Takeaways

object-fit controls how images or videos fill their containers without distortion.

Use cover to fill and crop, contain to fit fully with space around.

It is essential for responsive design and consistent media display.

Works only on replaced elements like img and video.

Helps avoid stretched or squashed images when container sizes differ.