Question

我试图将一个元素（在我的情况下是一个图像）居中放在一个盒子里面。 Webkit浏览器中的一切都运行良好，但Firefox会延伸比它们更宽的图像。

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

＆＃13;

* {
  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%;
}

＆＃13;

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

＆＃13;

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%修复了问题，因为它设置了弹性项目的初始主要大小。如果弯曲方向相反，即列，则需要使用弹性基础：nth-child(3)上的100％

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

＆＃13;

* {
  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%;
}

＆＃13;

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

＆＃13;

Firefox扩展以Flexbox为中心的元素

2 个答案: