Viewed: 11111

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 or it’s saved you time, I would be grateful for your support.

Next to read

Feature detection with CSS using @supports

Start new designs quicker

It’s my aim to help you be a better designer. I’ve made you a simple Adobe Illustrator template to manage your colour, grid and guides. So you’ll get to executing your ideas around 20 minutes sooner, every time.

Join my monthlyish email list and I’ll send you the template and new tutorials to help you design & code beautiful websites. You can unsubscribe anytime.