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

Question

我正在尝试让一张图片适应一个容器，同时保持其宽高比。根据方向，图像应该占据全高或全宽。我的解决方案在我测试的所有浏览器上都可以正常工作，但在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;
}

- Mosset Jérémie

Answer 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 */

在上，将flex: 1改为其他属性以增加与Firefox的兼容性。有关更多信息，请参阅评论和错误报告。

- benzkji

---

这个可以用CSS hack来针对IE 11，因为它会在至少FF上搞砸一些东西。 - Mosset Jérémie

哈！写完这个之后，我也不确定，因为它给我搞砸了一些东西！然而在IE中又没有问题。走在薄冰上！ - benzkji

很奇怪，即使我没有将flexbox添加到父元素中，这对我也有效。而且在其他浏览器中也没有任何问题（与Mosset不同，FF对我来说很好）。 - Jemar Jones

为了防止宽高比失调，我需要在图像上使用 flex: 0 0 auto，正如错误报告中所提到的。感谢提供链接。 - Josh Harrison

Bug报告链接已经失效，微软已经停用了“Microsoft Connect”。我猜他们仍然将这篇文章隐藏在其他网站之一，但是我不知道是哪一个 - 他们似乎觉得没有必要为所引用的事项提供更新的URL。 - Zarepheth

Answer 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;
}

- Tushar

---

我拿到Windows后，会看看这是否有效。但是如果我记得正确，这样做会使竖向图像脱离其父容器。 - Mosset Jérémie

在Stack Overflow上，为什么解决方案可行需要添加一些解释是一个良好的实践。欲了解更多信息，请阅读如何回答。 - Fabian Schultz

它确实会弄乱垂直图像，因为它们的宽度和高度都被设置成100％。因此它们不能保持它们的比例。 - Mosset Jérémie

Answer 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;
}

- CodingSnow

---

你的小提琴在IE 11上无法工作。图像保留了收音机，但跑出了它的div。看起来它正在获取视口的宽度而不是父div的宽度。 - Mosset Jérémie

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