如何强制Internet Explorer 11正确显示图像长宽比？ [英] How to force Internet Explorer 11 to display image aspect ratio correctly?

问题描述

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

If you look at this page with Internet Explorer 11, you can see images aspect ratio is uncorrect - image is vertically stretched. IE 11 stubbornly displays image's original height. All other browsers (latest Chrome, Firefox and Edge versions) displaying correctly. Why this css code not working with 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 flexbox实现似乎存在一个错误，可以通过添加以下代码来解决到您的图片CSS样式：

According to this discussion there seems to be a bug with IE flexbox implementation, that can be worked around with adding the following code to your image css styles:

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

这篇关于如何强制Internet Explorer 11正确显示图像长宽比？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！