在IE 11中使用max-width和max-height保持图像比例(示例代码)

栏目: 类库 · 发布时间: 2021-04-13

简介  这篇文章主要介绍了在IE 11中使用max-width和max-height保持图像比例(示例代码)以及相关的经验技巧,文章约2693字,浏览量349,点赞数8,值得推荐!

我正在尝试将图像放入容器内,同时保持其大小比例。图像应取整个高度或宽度,具体取决于方向。我的解决方案适用于我测试的所有浏览器,但IE11(令人惊讶的是在10和9中工作)。

在IE 11中,图像在右侧裁剪。如果可能的话,我想要一种纯粹的CSS方式,我不关心它的居中。

这是JSFiddle:https://jsfiddle.net/wagad0u8/

<div class="owl-item" style="width: 465px;">
  <a class="img-flux" href="page1.html">
    <img alt="omg" src="http://placehold.it/1000x100">
  </a>
</div>

<div class="owl-item" style="width: 465px;">
  <a class="img-flux" href="page1.html">
    <img alt="omg" src="http://placehold.it/400x780">
  </a>
</div>

.img-flux img {
    border: 0;
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
    position: relative;
    transition: all 0.3s;
    margin: 0 auto;
    float: none;
    display: block;
    vertical-align:middle;
}
#content-block *:last-child {
    margin-bottom: 0px;
}
.owl-item, .owl-item .img-flux {
    height: 100%;
}
.img-flux {
    background-color: #ECECEC;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.owl-item{
  float:left;
  height:300px;
  margin-bottom:50px;
}
答案

这似乎是IE11中的一个错误:Bug Report。添加flex: 1(如报告中所示)

.img-flux img {
    flex: 1;
    max-width: 100%;
    max-height: 100%;
}

适合我。父母的Flexbox似乎没问题,所以即使是居中也很容易。

另一种选择是

flex: 0 0 auto;  /* IE */
object-fit: scale-down; /* FF */

img上,而不是flex: 1,增加了与Firefox的兼容性。有关详细信息,请参阅注释和错误报告。

另一答案
.img-flux img {
    border: 0;
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: 100%;
    position: relative;
    transition: all 0.3s;
    margin: 0 auto;
    float: none;
    display: block;
    vertical-align: middle;
}
另一答案

使用

vw - for width instead of %

vh - for height instead of %

在IE11等旧版本中受支持。

https://jsfiddle.net/wagad0u8/1/

要仅将更改的代码应用于IE10 +使用:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ */
.img-flux img {
max-width : 100vw;
max-height : 100vh;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,版权归原作者或者来源机构所有,感谢作者,如果未能解决你的问题,请参考以下文章。

CSS Header在IE中的位置错误

IE10、IE11 ASP.Net 网站无法写入Cookie 问题(示例代码)

在IE 8中显示图像,image / abc.gif和image abc.gif都工作正常,但在IE 11中却没有。有人可以帮我解决这个问题(示例代码)

卸载IE9,IE10,IE11(示例代码)

css的盒子模型