gpt4 book ai didi

css - 如何强制 Internet Explorer 11 正确显示图像纵横比?

转载 作者:行者123 更新时间:2023-11-28 10:25:12 25 4
gpt4 key购买 nike

如果你看this page使用 Internet Explorer 11,您可以看到图像纵横比不正确 - 图像被垂直拉伸(stretch)。 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;
}

最佳答案

根据 this discussion IE flexbox 实现似乎有一个错误,可以通过将以下代码添加到您的图像 css 样式来解决:

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

关于css - 如何强制 Internet Explorer 11 正确显示图像纵横比?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54050865/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com