Neat trick for CSS object-fit fallback on Edge (and other browsers)

Primož Cigler
Jan 12, 2016 · 2 min read

Yesterday I needed to implement the object-fit fallback in the most recent theme we’ve built at ProteusThemes. There is an element on a homepage we call “Post Tiles” and it shows most recent WP blogposts along with the associated featured images.

Image for post
Image for post
“Post Tiles”

We didn’t want to generate multiple image sizes of all these images, so we decided to go with the object-fit.

Object-fit CSS property has a decent support in modern browsers, except in all IEs and even Edge (update 2017–10–18: Edge 16 now support object-fit). My first thought was to use a polyfill developed by Anselm Hannemann, but it turned out it is not working as expected in Edge (and it is not actively maintained anymore).

So after an hour or so I ended with a better and more lightweight solution. It is altogether 10 lines of JS and 10 lines of CSS code. Let’s assume your HTML looks like this:

<div class=”post__image-container”>
<a href=”blogpost.html”>
<img src=”pic.jpg” class=”post__featured-image”>

So you use the object-fit like this:

.post__featured-image {
width: 120px;
height: 120px;
object-fit: cover;

This will work beautifully, except in Edge and IE. But a very similar background-position: cover is working for IE 9+. So let’s use Modernizr for feature detection and fix this with some JS:

if ( ! Modernizr.objectfit ) {
$('.post__image-container').each(function () {
var $container = $(this),
imgUrl = $container.find('img').prop('src');
if (imgUrl) {
.css('backgroundImage', 'url(' + imgUrl + ')')

This will copy the src of our image to the background image source of the container. Further we change our SCSS a little bit:

.post {
&__image-container {
width: 120px; // the same width and height as for the <img>
height: 120px;
&.compat-object-fit {
background-size: cover;
background-position: center center;
.post__featured-image { // hide image if object fit is not supported - opacity to 0 for the link area
opacity: 0;
&__featured-image {
width: 120px;
height: 120px;
object-fit: cover;

And that’s it. The class .compat-object-fit will only be added by JS if the browser doesn’t support object-fit.

Let me know on Twitter if you have any question.

Update 2016–10–06: object-fit in Edge is now marked with a high priority and in the backlog for implementation #.

Update 2017–03–14: object-fit in Edge is now under active development 🎉 #.

Update 2017–10–18: object-fit has been shipped in Edge 16!!! #

You might follow me on Twitter, but we both know Twitter is very noisy. So you can leave me your email and I will occasionally send you stuff I find useful.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store