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

Question

我正在尝试在flexbox网格上显示图像，并且它在Chrome中可以正常工作，但在Firefox中无法正常工作（不确定哪个是错误的）。

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

Chrome浏览器：

Firefox：

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