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

Question

我试图使用纯CSS显示一行图像，结果是所有图像都有相同的高度。例如，一个较高的图像将收缩，如果它旁边是一个较小的图像。一排可以有2-6张图像.给定9:16的图像和16:9的图像，理想的结果应该是这样的：

​

​

我最初尝试使用Flexbox，但是列的宽度并没有改变--图像中的图像只是缩放以适应内部。我认为CSS网格可能会起作用，但我也无法做到这一点。

下面是HTML：

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

当前的CSS网格实现：

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

目前的结果是：

​

​

Answer 1

从jons的回答扩展

您可以在图像容器中设置固定高度(所有图像的所需高度，不论宽度)：

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

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

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

结果：对代码的看法

或者，包括图像中显示的空白：对代码的看法

Answer 2

我就这么做

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

如果你知道图像的大小，数学可能会更具体。