How to keep same image heights in fluid CSS grids?

Question

I'm quite new to CSS grids. I need to code a two-column component with fluid, equal-height images inside. I could do it with Flexbox, but this time, I need a CSS grid, and it must be responsive.

That said, this component has 2 images, 1 per column. The original img files have equal heights (340x300, 708x300). I need to show them about 30% and 70% width, minus the gap. I tried to use both 'auto' and fr units, and I also combined them but had no luck.

On the last/large breakpoint, it's all fine:

The problem comes when on smaller breakpoints: I can't keep the 2 images the same exact height (make them scale with the same height):

Here's some code, one of the versions. But any variation of this code (different unit combinations) gives some kind of problems, and none of them makes me have equal height images:

.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%;
}

Ah, and obviously, the images are fluid (max-width:100%; height: auto).

How to solve it?

Answer 1

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

You can exploit the fact that fractional units work in proportions of the items. So use grid-template-columns: 340fr 708fr if the images file are not going to change. See demo below:

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