Object fit for full viewport images with ease

Code3 min readView on GitHub

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.

Usage

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

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

object-position

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?

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. You can unsubscribe anytime.

Also, as a subscriber I can provide critique on your designs—send something through after you confirm your subscription.