How to keep same image heights in fluid CSS grids? - html

Question

I'm quite new to css grids. I need to code a 2 columns 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 gap. I tried to use both 'auto' and fr units, also combined, but 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 same height):
Here's some code, one of the versions. But any variation of this code (different unit combinations) give some kind of problems, and none of them makes me having 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?

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>

Answer 2

This is my answer. The trick is using 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>