在 IE 11 中使用 max-width 和 max-height 保持图像比例

Posted 2023-02-19

【中文标题】在 IE 11 中使用 max-width 和 max-height 保持图像比例

【英文标题】：Keep image ratio using max-width and max-height in IE 11

【发布时间】：2017-05-20 06:39:38

【问题描述】：

我正在尝试让图像适合容器，同时保持其大小比例。图像应根据方向取全高或全宽。我的解决方案确实适用于我测试过的所有浏览器，但 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  src="http://placehold.it/1000x100">
  </a>
</div>

<div class="owl-item" style="width: 465px;">
  <a class="img-flux" href="page1.html">
    <img  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;

【参考方案1】：

这似乎是 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 的兼容性。有关详细信息，请参阅 cmets 和错误报告。

【讨论】：

这行得通！你只需要使用 css hack 来定位 IE 11，因为它至少会在 FF 上搞砸。

哈！写完后不确定，因为它也把事情搞砸了！然后又没有在 IE 中。在冰上行走！

奇怪的是，这对我有用，甚至不需要向父级添加 flexbox。并且不会在其他浏览器中引起任何问题（FF 对我来说很好，不像 Mosset）

为了防止纵横比下降，我需要在图像上使用flex: 0 0 auto，如错误报告中所述。感谢您的链接。

错误报告链接不再有效。 Microsoft 已停用“Microsoft Connect”。我猜他们仍然将文章隐藏在其他网站之一中，但我不知道是哪一个 - 他们认为没有必要为引用的项目提供更新的 URL。

【参考方案2】：

.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;

【讨论】：

我会在我把手放在窗户上时看看它是否有效。但是，如果我记得这样做的话，会让垂直图像脱离它们的父级。

在 Stack Overflow 上添加解释为什么您的解决方案应该有效是一种很好的做法。更多信息请阅读How To Answer。

它确实弄乱了垂直图像，因为它们获得了 100% 的宽度和高度。所以他们不保持他们的比率。

【参考方案3】：

使用

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;

【讨论】：

您的小提琴在 IE 11 上不起作用。图像保留了收音机但超出了它的 div。似乎它正在使用视口的宽度而不是父 div 的宽度。

不知道为什么要使用视口高度/宽度？​​