How to fix for Object-Fit Cover for IE

By Zedric Myers | Published August 14, 2017 | Categories: Web Development

You may notice Object-Fit Cover doesn’t work well for IE or Edge in a responsive aspect. Microsoft is working on a fix for this, so this would help in the meantime. There is a work around for this and you can find all the needed information at the below source. Quick example code reference, below:

HTML <div class=”post image-container”> <a href=”blogpost.html”> <img src=”pic.jpg” class=”post__featured-image”> </a> </div>
CSS: .post__featured-image { width: 120px; height: 120px; object-fit: cover; }
jQuery: if ( ! Modernizr.objectfit ) { $(‘.post__image-container’).each(function () { var $container = $(this), imgUrl = $container.find(‘img’).prop(‘src’); if (imgUrl) { $container .css(‘backgroundImage’, ‘url(‘ + imgUrl + ‘)’) .addClass(‘compat-object-fit’); } }); }
SCSS: .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; } }  

Sources:medium