object-fit: cover and IE11

Question

I'm using object-fit: cover; in my CSS to line up images on a page, because they need to be the same height. It works perfectly in most browsers however IE11 is distorting the images.

I read that I might be able to use @support to fix this but I don't understand how to do this? Or is there another option that I might be able to use?

The code I have used is below - would really appreciate any help.

.brands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 1rem;
}

.brands__item img {
  display: block;
  /* Make sure max-width is added */
  max-width: 100%;
  height: 70px;
}
    
.brands__item img {
  width: 130px;
  height: 75px;
  object-fit: contain;
}   
    
.brands__item a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
    


<div class="row" style="padding: 10px 30px 40px;">
    <hr style="border-color: #000000; border-width: 2px; width: 90px; margin-bottom: 10px;" />
<h5 style="text-align: center;font-size: 2.4rem;margin-bottom:30px;">Trending now</h5>
<ul class="brands">
  <li class="brands__item">
    <a href="#">
      <img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/steel-blue-logo-148x75.png" alt="Steel Blue logo" />
    </a>
  </li>
    <li class="brands__item">
    <a href="#">
      <img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/dewalt-logo-103x45.png" alt="Dewalt logo" />
    </a>
  </li>
  <li class="brands__item">
    <a href="#">
      <img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/3m-logo-105x55.png" alt="3M logo" />
    </a>
  </li>
  <li class="brands__item">
    <a href="#">
      <img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/bahco-logo-125x75.png" alt="Bahco logo" />
    </a>
  </li>
    <li class="brands__item">
    <a href="#">
      <img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/honeywell-logo-211x40.png" alt="Honeywell logo" />
    </a>
  </li>
  <li class="brands__item">
    <a href="#">
      <img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/metabo-logo-166x65.png" alt="Metabo logo" />
    </a>
  </li>
</ul>
</div>
<!-- end -->

Answer 1

I test your code in IE 11 and the issue seems not only with object-fit.

1. CSS Grid part of your code doesn't work in IE 11.

   • You need to use -ms- prefix to elements such as display: grid, grid-column and grid-row.
   • grid-template-areas isn't supported, you can convert it to work with grid lines.
   • The repeat() notation doesn't work in IE 11. You need to write in all row and column lengths.

2. object-fit is not supported by IE 11. You can refer to this thread for the fix.

3. I use @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {} to target IE 11 in CSS to add some codes for IE 11 to fix the issue. The added code is like below:

   @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
       .brands__item img {
           width: 130px;
           height: auto;
           max-width: 100%;
           max-height: 100%;
       }
   
       .brands {
           display: -ms-grid;
           -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
       }
   
       li:nth-of-type(1) {
           -ms-grid-column: 1;
           -ms-grid-row: 1;
       }
   
       li:nth-of-type(2) {
           -ms-grid-column: 2;
           -ms-grid-row: 1;
       }
   
       li:nth-of-type(3) {
           -ms-grid-column: 3;
           -ms-grid-row: 1;
       }
   
       li:nth-of-type(4) {
           -ms-grid-column: 4;
           -ms-grid-row: 1;
       }
   
       li:nth-of-type(5) {
           -ms-grid-column: 5;
           -ms-grid-row: 1;
       }
   
       li:nth-of-type(6) {
           -ms-grid-column: 6;
           -ms-grid-row: 1;
       }
   }