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

Question

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

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

在last/large断点上，一切正常：

问题出现在较小的断点上：我无法使 2 个图像保持相同的精确高度（使它们以相同的高度缩放）：

这是一些代码，其中一个版本。但是这段代码的任何变化（不同的单位组合）都会带来一些问题，其中 none 让我拥有等高图像：

.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>

Answer 2

这是我的回答。诀窍是使用 img{object-fit: cover;}

.wrap{
  width:100vw;
  display:grid;
  grid-template-columns:3fr 7fr;
  grid-gap:1em;
}
.a img{width:100%;height:100%;object-fit: cover;}

<div class="wrap">
 <div class="a">
   <img src="http://via.placeholder.com/340x300" />
 </div> 
 <div class="a">
   <img src="http://via.placeholder.com/708x300" />
 </div>   
</div>

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

How to keep same image heights in fluid CSS grids?

html

css

css-grid

responsive