Firefox 以 Flexbox 为中心拉伸元素

Question

我正在尝试将任意大小的元素（在我的情况下为图像）居中放置在一个框内。在 Webkit 浏览器中一切正常，但 Firefox 会拉伸长而不是宽的图像。

为了说明这个问题，我创建了 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 只是在垂直方向上拉伸了一个长于高的图像。如何使 Firefox 的行为方式与所有 Webkit 浏览器一样？

Answer 1

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

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

http://jsfiddle.net/xjwguxs6/

Answer 2

设置flex-basis: 100% 解决了这个问题，因为它设置了弹性项目的初始主尺寸。如果 flex-direction 是反向的，即列，您将需要使用 flex-basis: 100% on nth-child(3)

.box:nth-child(2) img {
  flex-basis: 100%;
}

* {
  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%;
}
.box:nth-child(2) img {
  flex-basis: 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>