object fit for ie11

from this post

when you have an image in html

<div class="image-container">
  <img class="feature-image" src="something.jpg" alt="fancyImage" />
</div>

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

and it breaks in ie11,

1. go to Modernizr
2. get a custom build to check for this feature
3. copy paste it somewhere in your code

then check for the existense of object fit on the browser with

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

this adds a backgrond-image url to your css of the container, and adds a class called compat-object-fit.

in your css, add some styles for this class:

.image-container.compat-object-fit {
  background-size: cover;
  background-position: center center;
}
.image-container.compat-object-fit > img {
  opacity: 0;
}

and you should be good to go!

many thanks to Primož Cigler for this simple fix.