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