CSS object-fit IE hack (carousel) #html #css #js

object_fit_carousel_ie_hack.css

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */
  img.img-slide {
    opacity: 0 !important;
  }
}

object_fit_carousel_ie_hack.html

<div id="mainSlider" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img class="d-block w-100 img-slide" src="" alt="First slide" />
    </div>
  </div>
</div>

object_fit_carousel_ie_hack.js

  var userAgent, ieReg, ie;
  userAgent = window.navigator.userAgent;
  ieReg = /msie|Trident.*rv[ :]*11\./gi;
  ie = ieReg.test(userAgent);

  if(ie) {
    $(".carousel-item").each(function () {
      var $container = $(this),
          imgUrl = $container.find("img").prop("src");
      if (imgUrl) {
        $container.css({"backgroundImage":'url(' + imgUrl + ')',
                        "background-size":"cover",
                        "height":"100vh",
                        "width":"100vw",
                        "max-width":"100%",
                        "background-position":"center"});
      }
    });
  }