Neat trick for CSS object-fit fallback on Edge (and other browsers)
Primož Cigler
17032

I’ve made improvements to make the script far more automated. Instead of applying classes to the images manually, I’m automating it.

if ( ! Modernizr.objectfit && Modernizr.backgroundSize) {
 $(‘img’).each(function () {
 if ($(this).css(‘object-fit’) == ‘cover’){
 imgUrl = $(this).prop(‘src’);

$(this)
 .css(‘opacity’,0)
 .parent()
 .css({
 ‘backgroundImage’ :’url(‘ + imgUrl + ‘)’,
 ‘backgroundSize’ : ‘cover’,
 ‘backgroundPosition’ : center center,
 });
 }
 });
}

I’m detecting both object-fit and background-size with modernizr (if the browser doesn’t support background size, it’s doing a bunch of stuff for nothing). I Loop through every image on the page and check if it has object-fit:cover applied to it. If it does, I add all the styling fixes with js to keep the style sheets clean.

Show your support

Clapping shows how much you appreciated Daniel Tonon’s story.