html - Firefox 拉伸(stretch)以 Flexbox 为中心的元素

Question

我正在尝试将任意大小的元素(我的情况是图像)置于框内的中心。在 Webkit 浏览器中一切正常，但 Firefox 会拉伸(stretch)长度大于宽度的图像。

为了说明问题，我创建了 3 个 div 作为框，每个框包含不同大小的图像。这些盒子都设置为固定的宽度和高度，并且应用了一些 flexbox 规则来使图像在垂直和水平方向上居中。

* {
  box-sizing: border-box;
}

.box {
  display: flex;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  justify-content: center;
  align-items: center;
  float: left;
  margin-right: 50px;
}

.box img {
  max-width: 100%;
  max-height: 100%;
}

<div class="box">
  <img src="http://dummyimage.com/150x150/eeeeee.png">
</div>
<div class="box">
  <img src="http://dummyimage.com/300x150/eeeeee.png">
</div>
<div class="box">
  <img src="http://dummyimage.com/150x300/eeeeee.png">
</div>

img 应该缩小以使其完全填满框(水平或垂直，哪一边较长)，但保持纵横比。这正是 Webkit 浏览器中发生的事情。然而，Firefox 只是在垂直方向上拉伸(stretch)长于高的图像。我怎样才能使 Firefox 的行为方式与所有 Webkit 浏览器相同？

Answer 1

对图像使用“object-fit: contain”似乎可以解决问题:)

.box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

http://jsfiddle.net/xjwguxs6/