适合在 Flexbox/Grid 中缩放的图像行？答案

【问题标题】：Row of images that fit to scale in Flexbox/Grid?适合在 Flexbox/Grid 中缩放的图像行？
【发布时间】：2019-08-10 22:04:43
【问题描述】：

我正在尝试使用纯 CSS 显示一行图像，结果是所有图像都具有相同的高度。例如，如果较高的图像靠近较小的图像，则它会缩小。一行可以有 2-6 张图像。给定一个 9:16 的图像和一个 16:9 的图像，理想的结果应该是这样的：

我最初尝试使用 Flexbox，但列宽没有改变 - 里面的图像只是缩放以适应里面。我认为 CSS Grid 可能会起作用，但我也无法让它起作用。

这是 HTML：

<p class="side-by-side-images">
<img src=""> // Tall image
<img src=""> // wide image
</p>

当前的 CSS Grid 实现：

.side-by-side-images {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(auto-fit);
  grid-column-gap: 5px;
}
img {
    width: 100%;
}

当前结果：

【问题讨论】：

你会知道图片的大小还是动态的？
它将是动态的。

标签： css

【解决方案1】：

从jons' answer扩展：

您可以在图像容器中设置固定高度（所有图像的高度，无论宽度如何）：

.image-container {
  display:flex;
  height:200px;
  background:gray;
}

并将所有图像的高度设置为其容器的高度：

.image-container img {
  width:auto;
  height:100%;
}

结果： view on codepen

或者，包括图像中显示的间隙：view on codepen

【讨论】：

【解决方案2】：

我会做的

img {
  height: 300px; // or whatever value you want
  width: auto;
}
.container {
  display: flex;
  flex-wrap: wrap;
}

如果您知道图片的大小，那么数学计算可能会更具体。

【讨论】：