如何强制 Internet Explorer 11 正确显示图像纵横比？答案

【问题标题】：How to force Internet Explorer 11 to display image aspect ratio correctly?如何强制 Internet Explorer 11 正确显示图像纵横比？
【发布时间】：2019-01-05 09:57:46
【问题描述】：

如果您使用 Internet Explorer 11 查看this page，您会看到图像纵横比不正确 - 图像被垂直拉伸。 IE 11 顽固地显示图像的原始高度。所有其他浏览器（最新的 Chrome、Firefox 和 Edge 版本）显示正确。为什么这个 css 代码不适用于 IE 11？

html:

<section class="content-6 sec-content">
<div class="container sec-right">
<div>
<img src="https://eoy.ee/oosorr/images/8.jpg" alt="Nõmmemännik" width="1280" height="853" />
</div>
</div>
</section>

css:

img {
width:100%;
height:auto;
max-width: 100%;
}

.sec-content{
display:-ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction:column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: end;
justify-content: flex-end;
}

.sec-content > div{
padding-bottom:50px;
display:-ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction:row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.sec-right{
-ms-flex-pack: end;
justify-content: flex-end;
}

.sec-right > div{
display:-ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction:column;
padding:35px 45px;
position: relative;
z-index: 10;
width: 90%;
}

.sec-right > div::before {
background: rgba(0,0,0,0.4);
content:" ";
top:0;
bottom:0;
width:3000px;
position: absolute;
z-index: -100;
}

.sec-right > div::before {
left: 0;
}

【问题讨论】：

IE 在图像是弹性项目方面存在一些问题，您可能会更好地包装图像。如果没有，一种选择是在图像上设置min-height: 1px，但不能说这是否一直有效。

标签： css internet-explorer flexbox

【解决方案1】：

根据this discussion 看来，IE flexbox 实现似乎存在一个错误，可以通过将以下代码添加到您的图像 css 样式中来解决此问题：

img {
    ...
    min-height: 1px;
}

【讨论】：

我整天都在寻找这个答案，谢谢！顺便说一句，我的问题似乎与 IE11 的 Windows 10 版本无关

【解决方案2】：

Piotr 链接非常有用 - min-height:1px solved the problem. 它没有帮助，然后我将它添加到 img，但添加到 .sec-content > div。我删除了一些 flexbox 属性。最终的 CSS：

.sec-content{
display:-ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction:column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: end;
justify-content: flex-end;
}

.sec-content > div{
padding-bottom:50px;
display:-ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction:row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
    min-height: 1px;
}

.sec-right{
-ms-flex-pack: end;
justify-content: flex-end;
}

.sec-right > div{
padding:35px 45px;
position: relative;
z-index: 10;
width: 100%;
}

【讨论】：