问题描述
我正在使用 object-fit:cover;在我的 CSS 中排列页面上的图像,因为它们需要具有相同的高度。它在大多数浏览器中都能完美运行,但 IE11 会扭曲图像。
我读到我可能可以使用@support 来解决这个问题,但我不明白该怎么做?或者我可以使用其他选项吗?
我使用的代码如下 - 非常感谢您的帮助。
.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 -->
解决方法
我在 IE 11 中测试了您的代码,问题似乎不仅仅与 object-fit
相关。
-
您代码的 CSS 网格部分在 IE 11 中不起作用。
- 您需要对
-ms-
、display: grid
和grid-column
等元素使用grid-row
前缀。 -
grid-template-areas
不受支持,您可以将其转换为与grid lines
一起使用。 -
repeat()
表示法在 IE 11 中不起作用。您需要写入所有行和列长度。
- 您需要对
-
object-fit
是 not supported by IE 11。您可以参考 this thread 进行修复。 -
我在 CSS 中使用
@media all and (-ms-high-contrast: none),(-ms-high-contrast: active) {}
来定位 IE 11,为 IE 11 添加一些代码来解决这个问题。添加的代码如下:@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; } }