Most everyone is familiar with the fact that movies are letterboxed, rescaled or cropped as they move from the theater to televisions and tablets. As a web developer, you’ll also be aware of the different ways background images can be made responsive on web pages, stretching to cover the viewport, or being cropped as the browser window resizes.

An obvious gap in web design is the lack of the same intelligent and automatic resizing rules for images and videos. That’s the role of CSS object-fit.

Thumbnails are a good use-case. Currently, product images in an online store or illustrated links to articles are usually processed by a bitmap editor to be exactly the same size and aspect ratio. Even with in-depth instructions and server-side checks, handing a CMS over to a client who can upload images to the site often results in pictures that are stretched to the wrong size, or to different aspect ratios. For example, you may have determined that product thumbnail images on a site should appear using this CSS:

.product-thumb img {
	width: 150px;
	height: 150px;
	border: 1px solid;
}

... requiring that the thumbnail images be exactly that size, or at least square. But if the client uploads product images like these:

When the images are displayed as thumbnails, they’ll appear “squished” by the CSS rules, like this:

Obviously, this is far from ideal. Traditional solutions to the problem include:

• severely restrict the user to uploading images at very particular sizes
• process the images server-side to get the image size(s) needed
• display the images as backgrounds with careful positioning
• use complex applications of position: fixed.

Now, object-fit gives us several options that are far easier to apply:

.product-thumbs img {
	width: 150px; height: 150px;
	border: 1px solid;
	object-fit: contain;
}

The result, in compliant browsers:

This “letterboxes” the images, preserving their aspect ratio. Space is added above or below the images, or to their left and right, to keep them the right size, without squishing or stretching them.

Alternatively, we can use cover as a value:

.product-thumbs img {
	width: 150px; height: 150px;
	border: 1px solid;
	object-fit: cover;
}

The result:

As you can see, this works almost exactly like background-size: cover for background images; it’s equivalent to widescreen movies transferred to 4:3 aspect ratio TV using “pan-and-scan”: every pixel in the element is filled with the image, and the “leftover” on each side cropped out.

If you wanted the bad old default behavior, you could set object-fit to fill; this creates the same appearance as background-size: 100% 100% would for a background image.

Finally, there’s object-fit: none, which leaves the image at its natural size and correct aspect ratio, focused at its center, with any overflow cropped:

.product-thumbs img {
	width: 150px; height: 150px;
	border: 1px solid;
	object-fit: none;
}

The result:

You might think that this could be very useful to create certain kinds of image galleries, and you’d be right. Variations on it can also be used to correct the aspect ratio of uploaded videos.

Support

The good news is that while browser support for object-fit has lagged for a while, development has recently picked up: the latest versions of all modern browsers support it thoroughly (i.e. Chrome, Safari, Opera and Android) (It’s listed as “Under Consideration” for inclusion in Microsoft Edge).

In the meantime, there’s a few things you can do to ensure that object-fit works in all browsers and older versions:

1. Apply overflow: hidden to elements that you want to be object-fit: this will ensure that browsers without the latter will at least crop the images to the desired size.

   .product-thumbs img {
   	width: 150px; height: 150px;
   	border: 1px solid;
   	object-fit: cover;
   	overflow: hidden;
   }

2. Use the technique developed by Primož Cigler using Moderizr, Sass, and JQuery, which will gain you support in non-compliant browsers.

Conclusion

The automatic layout algorithms of object-fit makes the consistent presentation of images and videos with changeable widths, heights and aspect ratios much easier in modern web design, especially when combined with <picture>; we have even more choices about precise placement by using object-fit with object-position, discussed in an upcoming article.

This new-found ability shouldn’t excuse lazy acceptance of any media file size – the CMS asset pipeline should still optimize files for performance – but intelligent use of object-fit in site CSS means we can spend more time on content creation and design, rather than processing pictures.

Photographs by Tinkerbots, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.