Flexbox和图像 - Chrome和Firefox中的结果不同

Question

我正在尝试在flexbox网格上显示图像，它在Chrome中按预期工作，但在Firefox中不能工作（不确定哪一个是错误的）。

链接到CodePen ： https ： //codepen.io/anon/pen/QJNajw ？ editors = 1100

铬：

火狐：

CSS背后的想法是首先使网格的单元格占据所有可用空间，然后让图像填充单元格而不拉伸。

在Firefox中看起来，图像只消耗所有可用宽度，这会导致溢出。 （请注意，在第二个网格中，布局比高大更宽，因此当图像消耗可用宽度时，它不会垂直重叠。）

有没有办法让它在Firefox中按预期工作？

 .grids { display: flex; } .grid { display: flex; flex-direction: column; background: #ddd; box-sizing: border-box; border-radius: 10px; margin: 5px; padding: 2px; width: 120px; height: 120px; } .row { display: flex; justify-content: center; flex-grow: 1; flex-basis: 0; } .cell { display: flex; flex-grow: 1; flex-basis: 0; justify-content: center; align-items: center; box-sizing: border-box; height: 100%; padding: 2px; } .cell img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } 

 <div class="grids"> <div class="grid"> <div class="row" style="padding: 0px 16.6667%;"> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> </div> <div class="row" style="padding: 0px 0%;"> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> </div> <div class="row" style="padding: 0px 16.6667%;"> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> </div> <div class="row" style="padding: 0px 0%;"> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> </div> </div> <div class="grid"> <div class="row" style="padding: 0px 37.5%;"> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> </div> <div class="row" style="padding: 0px 25%;"> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> </div> <div class="row" style="padding: 0px 12.5%;"> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> </div> <div class="row" style="padding: 0px 0%;"> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> </div> </div> </div> 

Answer 1

有趣的案例！ 我不知道为什么这会发生在flexbox上。

但是，经过一些实验，我发现它通过将img相对于其单元格定位来工作：

.cell {
     position: relative;
}
.cell img {
    position: absolute;
}

这适用于Firefox和Chrome。

Answer 2

我对浏览器之间的差异没有很好的了解，但你可以在图像上设置最大宽度，这样它们就不会比你想要的那样大。 三角形网格图像默认为25px，因此您可以匹配，如下所示：

.cell img {
  display: block;
  width: 100%;
  max-width: 25px;
  max-height: 100%;
  object-fit: contain;
}