Alternative option of object-fit:cover for internet explorer

Question

I\'m looking an alternative method of the object-fit:cover for the internet explorer, because is not supporting it. Basically I\'m using the object-fit:cover for not stretch

Answer 1

You can really create an alternative for ie9+ using Modernizr. So you can still using object fit where it's supported. In this example I use jQuery too.

if ( ! Modernizr.objectfit ) {
  $('.grid-image').each(function () {
      var $wrapper = $(this),
      imgUrl = $wrapper.find('img').prop('src');
      if (imgUrl) {
         $wrapper
         .css('backgroundImage', 'url(' + imgUrl + ')')
         .addClass('compat-object-fit')
         .children('img').hide();
      }  
   });
 }

Obviously if any user wants to browse the web with software from the 20th century he will get a 20th century version of the web. It's like trying to watch the 70mm scenes from Interstellar (or any modern 16:9 film) in a 4:3 tube tv, you won't see all the features of the docking scene.