Understanding the Object-fit CSS Property: Basics and Examples

You’ve probably encountered a situation where you wanted an image to fit precisely within specific dimensions, yet maintain the width/height aspect ratio to prevent the image from getting “stretched.”

If you didn’t know, achieving this wasn’t a straightforward task with CSS for a very long time…

One of the tricks was to use the background-image property to work around the issue. However, background-image is meant for decorative images, not content-related images. Regardless, the problem is now solved thanks to the object-fit property.

The object-fit property defines how a specific element responds to the width and height of the enclosing element (Content Box). It is intended for use with images, videos, and other embedded media types, working alongside the object-position property.

In itself, this property allows us to crop images by providing control over how the image is stretched or shrunk within the surrounding element.

The video above (desktop only) isn’t just for beauty. Notice how it maintains proportions and always fills the enclosing element’s space. Feel free to play with the browser window to see.

Values of the object-fit Property

Aside from the inherit, initial, and unset values, the property can take five values:

• contain – The image maintains the width/height aspect ratio while fitting itself so that either the width or height (whichever is larger) matches the given dimensions.
• cover – The image maintains the width/height aspect ratio and completely covers the image area.
• fill – Default value. The image fills the existing space even if it means losing the width/height aspect ratio.
• none – The image won’t change its size in any way, and the original image size will fill the given space.
• scale-down – The image’s size changes as if the value chosen were both none and contain, using the smaller of the two.

Let’s demonstrate that these values are not easy to explain in Hebrew. The original width of the following image is 1240px, and the original height is 793px. In this post, it’s displayed at 50% of its size: 620x397px.

If we want the image to maintain the same height but fit within half the width, we face a problem – the width/height aspect ratio is lost, resulting in a distorted image:

The object-fit property can fix this for us. Let’s see the different values and their effects on this image:

object-fit: contain

img {
  object-fit: contain;
}

object-fit: cover

img {
  object-fit: cover;
}

object-fit: fill

img {
  object-fit: fill;
}

object-fit: none

img {
  object-fit: none;
}

object-fit: scale-down

img {
  object-fit: scale-down;
}

In the specific examples shown, object-fit: cover seems to be the most suitable.

The object-position Property

Let’s say you’ve cropped an image using object-fit, but the displayed portion isn’t in the position you desire. You can use the object-position property to control that.

Refer back to the example where we used object-fit: cover:

img {
  object-fit: cover;

  width: 310px;
  height: 397px;
}

Now, let’s change the X-axis position of the visible part of the image so that we see most of its right side:

img {
  object-fit: cover;
  object-position: 100% 0;

  width: 310px;
  height: 397px;
}

If we provide values beyond the limits, this is what we get:

img {
  object-fit: cover;
  object-position: -20% 0;

  width: 310px;
  height: 397px;
}

Browser Support

As you can see, the support for this property is quite extensive (excluding IE). All modern browsers fully support the object-fit property.