object-fit: cover and IE11 - internet-explorer-11

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.
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.
object-fit is not supported by IE 11. You can refer to this thread for the fix.
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;
}
}