Viewed: 12905

Object fit for full viewport images with ease

Code in one minute

This CSS feature will make life much easier where it concerns the size of images. It’s like background-size for background images. It’s easy to use and behaves in a similar way albeit different naming. I’m going to show how object-fit and viewport relative units allow, without distortion, sizing inline images, to a more fluid aspect ratio.

The major use case

I’m sure you have wanted images to be updateable through your CMS. You want them to be responsive and fill the container it’s in. As a result you have had to make some kind of sacrifice. object-fit solves this.


object-fit has options none, contain, scale-down and fill (which is the initial value).

.fitted-image {
  object-fit: cover; }


If you notice the crop position isn’t ideal for your image, object-position can help to fix this. It works in a similar way to background position. The initial value is 50% 50%.

.fit-top-center {
  object-position: top center; }

Creating full width/height viewport images

To make an image fill the viewport and avoid distortion, we need to use viewport units and object-fit.

.fitted-image {
  width: 100%;
  height: 100vh;
  object-fit: cover; }

Putting it together

See the Pen NPmgNB by Steve (@stevemckinney) on CodePen.

Browser support

As of writing the only downsides are IE doesn’t support it and Safari on Mac and iOS don’t support object-position. Updated support is always available on caniuse

There are polyfills available, if it’s crucial to you. I’m yet to use them, so I’m not able to provide an opinion.

If you found this article useful, why not support the upkeep of this website?

Next to read

Feature detection with CSS using @supports

Get the articles

It’s my aim to help you be a better designer. Join my monthlyish email list and I’ll send new tutorials to help you design & code beautiful websites.

I also do the occasional design critique, which you get access to for being a subscriber—send a design through after subscribing. Also, there’s some older templates and post files included. You can unsubscribe anytime.