css - 在 IE 11 中使用最大宽度和最大高度保持图像比例

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

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

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