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

我尝试使用纯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>

目前的结果是：

我会的

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

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

扩展自：

您可以在图像容器中设置固定高度（所有图像所需的高度，不考虑宽度）：

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

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

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

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

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

结果:

---

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

您知道图像的大小还是动态的？它将是动态的。