可以在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展开：

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

@Entity
class TableA{
  @ColumnInfo("COL_A")
  val columnA : String

  @ColumnInfo("COL_B,COL_C")
  val columns : Map<String,String>
}

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

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

结果： view on codepen

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

Answer 2

我会做

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

如果您知道图像的大小，则数学运算可能更具体。