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

Question

我正在尝试使用纯 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%;
}

当前结果:

Answer 1

从 jons' answer 展开:

您可以在图像容器中设置固定高度(您希望所有图像的高度，无论宽度如何):

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

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

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

结果: view on codepen

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