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/