html - 如何在流畅的 CSS 网格中保持相同的图像高度？

Question

我对 CSS 网格还很陌生。我需要编写一个 2 列组件的代码，其中包含流体等高图像。我可以用 flexbox 来做，但这次我需要一个 css 网格，而且它必须是响应式的。

就是说，这个组件有 2 张图片，每列一张。原始 img 文件具有相同的高度(340x300、708x300)。我需要向他们展示大约 30% 和 70% 的宽度，减去间隙。我尝试同时使用“auto”和 fr 单位，它们也结合使用，但没有成功。

在最后/大断点上，一切正常:

问题出现在较小的断点上:我无法使 2 个图像保持完全相同的高度(使它们以相同的高度缩放):

这是一些代码，其中一个版本。但是这段代码的任何变化(不同的单位组合)都会带来一些问题，而且没有一个能让我拥有等高的图像:

.images-block-box{

  display: grid;
  grid-gap: 16px;
  grid-template-columns: auto auto;
  //grid-template-columns: 1fr auto;
  //grid-template-columns: 1fr 2fr;
  //grid-template-columns: 33.333% 66.666%;
}

啊，显然，图像是流动的(max-width:100%; height: auto)。

如何解决？

Answer 1

The original img files have equal heights (340x300, 708x300).

您可以利用以下事实:小数单位 按元素的比例 工作。所以使用 grid-template-columns: 340fr 708fr 如果图像文件不会改变。请参阅下面的演示:

.images-block-box{
  display: grid;
  grid-gap: 16px;
  grid-template-columns: 340fr 708fr;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

<div class="images-block-box">
  <img src="https://via.placeholder.com/340x300"/>
  <img src="https://via.placeholder.com/708x300"/>
</div>