object-fit

You will be able to control how an image or video fills a fixed CSS box using object-fit, choosing between stretching, fitting, or cropping while preserving aspect ratio.

What it is

object-fit is a CSS property for replaced elements such as img and video. It decides how the media content is scaled and positioned inside the element's content box. Think of the CSS box as a window and the image as a picture behind it: fill stretches the picture to cover the window, contain shrinks it until the whole picture is visible, and cover enlarges it until the window is filled, possibly cutting off edges.

Related terms include object-position, which controls where the image sits inside the box, aspect-ratio, which can reserve a shape for the box, and background-size, which does a similar job for background images.

Why it matters

• It prevents distorted images when a layout requires a fixed height.
• It creates consistent thumbnails and cards without manually cropping files.
• It lets hero images fill a section while keeping the subject visible with object-position.
• It works for semantic img elements, so alt text and accessibility remain intact.
• It reduces the need for wrapper divs with overflow: hidden for simple image cropping.

Syntax or steps

The smallest useful pattern gives the element a box size, then chooses a fit mode:

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

Common values are fill, contain, cover, none, and scale-down. Add object-position when the default center crop hides important content.

Example

<img src="photo.jpg" alt="A mountain lake" class="hero">

<style>
.hero {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center 30%;
}
</style>

The img element is a real image, so screen readers can announce its alt text. The CSS gives it a full-width box that is 250 pixels tall. object-fit: cover scales the photo until the box is filled, preserving the photo's aspect ratio. object-position: center 30% moves the visible crop toward the upper part of the image, which is useful when the main subject is near the top.

Common mistakes

• Forgetting a fixed height. If the image box already matches the image's natural aspect ratio, object-fit may have no visible effect. Set both width and height, or use a layout that creates a different box size.
• Using fill by accident. fill is the default and stretches the image, which can distort faces or logos. Use cover or contain when aspect ratio matters.
• Cropping the wrong area. cover often centers the crop. If the subject is cut off, add object-position such as top, center, or percentages.
• Applying it to a non-replaced element. object-fit does not control a div background. Use background-size for decorative background images.

When to use it

Choose object-fit when the image is content. Choose background-size when the image is decoration or when you need layered backgrounds.

Practice

Guided exercise: Add an image to a page and style it with width: 100%; height: 250px; object-fit: contain; background: #eee;. Notice the empty bars around the image. Then change contain to cover and observe the crop.

Challenge: Create a square thumbnail that keeps a person's face visible. Expected output: a 160 by 160 pixel image with no distortion and the face near the top. Hint: use object-fit: cover; and object-position: center 20%;.

Quick check

Which object-fit value preserves the aspect ratio and may crop the image to fill the box?

cover.

Summary

object-fit separates the size of an image box from the way the image content fills that box. Use contain to show everything, cover to fill without distortion, and object-position to control what remains visible.