CSS 网格项目仅在 Chrome 中增长到最大高度

Question

我想实现以下目标：

一行中有多个图像，没有换行
图像在较小的设备上缩小并保持纵横比
图像在较大的设备上增长，直到达到最大高度
如果达到最大高度，图像会居中
图像之间不应该有间隙

如果你在Google Chrome中查看以下代码片段，这正是我想要实现的。但是，它只适用于 Chrome，因为它们似乎对 .grid { max-width: 100%; } 的处理方式不同。例如，Firefox 会缩小图像。如果您从 .grid 中删除 max-width: 100%;，您会在 Chrome 中得到与 Firefox 相同的结果。

Codepen

.flex {
  display: flex;
  justify-content: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, calc(100% / 5));
  grid-auto-flow: row;
  max-width: 100%;
}

img {
  width: auto;
  max-width: 100%;
  max-height: 100px;
}

<div class="flex">
  <div class="grid">
    <img src="https://via.placeholder.com/1280x720">
    <img src="https://via.placeholder.com/1280x720">
    <img src="https://via.placeholder.com/1280x720">
    <img src="https://via.placeholder.com/1280x720">
    <img src="https://via.placeholder.com/1280x720">
  </div>
</div>

除了 Chrome 中的效果外，我找不到实现此目的的方法。是只有 JavaScript 才有可能还是我忽略了什么？

Answer 1

However, it only works in Chrome, because they seem to handle .grid { max-width: 100%; } differently.

看起来确实如此。请改用 max-width: 100vw。

.flex {
  display: flex;
  justify-content: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, calc(100% / 5));
  max-width: 100vw; /* adjustment */
}

img {
  width: auto;
  max-width: 100%;
  max-height: 100px;
}

<div class="flex">
  <div class="grid">
    <img src="https://via.placeholder.com/1280x720">
    <img src="https://via.placeholder.com/1280x720">
    <img src="https://via.placeholder.com/1280x720">
    <img src="https://via.placeholder.com/1280x720">
    <img src="https://via.placeholder.com/1280x720">
  </div>
</div>

CSS 网格项目仅在 Chrome 中增长到最大高度

CSS Grid items only grow in Chrome to max-height

css

cross-browser

css-grid