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

Question

我对CSS网格很陌生。我需要编写一个2列的组件，并在其中填充流体等高图像。我可以用flexbox做到这一点，但是这次我需要一个CSS网格，并且它必须是响应式的。

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

在最后一个大断点上，一切都很好：

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

这里是一些代码，其中一个版本。但是此代码的任何变体（不同的单位组合）都会产生某种问题，并且没有一个使我拥有相等的高度图像：

.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

  

原始img文件的高度相等（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>