css - CSS Grid 项目仅在 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 才有可能还是我忽略了什么？

标签： csscross-browsercss-grid

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>