What is Object fit in CSS?

CSSmarkup~5 mins

Object fit in CSS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Object fit helps images or videos fill their container nicely without stretching or cutting off important parts.

You want an image to cover a box without distortion.

You have a video inside a fixed-size area and want it to fit well.

You want to show a profile picture inside a circle without stretching.

You want to keep an image's aspect ratio but fill the container.

You want to control how an image fits inside a card or gallery.

Syntax

CSS

object-fit: fill | contain | cover | none | scale-down;

fill stretches the image to fill the container (may distort).

contain fits the whole image inside the container, keeping aspect ratio.

cover fills the container and crops if necessary, keeping aspect ratio.

none displays the image at its original size.

scale-down compares none and contain and uses the smaller size.

Examples

This makes the image fill the box and crop if needed, keeping its aspect ratio.

CSS

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

This fits the whole image inside the box without cropping, may leave empty space.

CSS

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

This stretches the image to exactly fill the box, which can distort it.

CSS

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

Sample Program

This page shows three boxes with the same image but different object-fit settings. You can see how the image changes shape and cropping inside each box.

CSS

<!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: 300px;
      height: 200px;
      border: 2px solid #333;
      margin-bottom: 1rem;
      overflow: hidden;
    }
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
    .cover img {
      object-fit: cover;
    }
    .contain img {
      object-fit: contain;
      background-color: #eee;
    }
    .fill img {
      object-fit: fill;
    }
  </style>
</head>
<body>
  <section>
    <h2>object-fit: cover</h2>
    <div class="container cover">
      <img src="https://via.placeholder.com/400x300" alt="Example image">
    </div>
  </section>
  <section>
    <h2>object-fit: contain</h2>
    <div class="container contain">
      <img src="https://via.placeholder.com/400x300" alt="Example image">
    </div>
  </section>
  <section>
    <h2>object-fit: fill</h2>
    <div class="container fill">
      <img src="https://via.placeholder.com/400x300" alt="Example image">
    </div>
  </section>
</body>
</html>

OutputSuccess

Important Notes

Use object-fit only on replaced elements like <img>, <video>, or <canvas>.

For accessibility, always include alt text on images.

Combine object-fit with fixed width and height on the container for best results.

Summary

Object fit controls how images or videos fill their containers.

Use cover to fill and crop, contain to fit inside without cropping, and fill to stretch.

It helps keep your page looking neat and images clear without distortion.