CSS 网格项目在 Chrome 浏览器中只能增长到最大高度。

Question

我想实现以下目标。

• 一行有多张图片，但没有包袱
• 图像在较小的设备上会缩小，并保持纵横比。
• 图像在较大的设备上增长，直到达到最大高度。
• 如果达到最大高度，图像将居中。
• 画龙点睛

如果你在Google Chrome浏览器中查看以下代码片段，这正是我想要实现的。然而，它只在Chrome浏览器中工作，因为他们似乎在处理 .grid { max-width: 100%; } 不同。例如，Firefox会将图片缩小。如果您删除 max-width: 100%; 从 .grid 你在Chrome中得到的结果和在Firefox中得到的结果是一样的。

代码笔

.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

然而，它只在Chrome中工作，因为他们似乎处理 .grid { max-width: 100%; } 不同。

当然看起来是这样的。使用 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>