Как сохранить одинаковую высоту изображения в жидких CSS-сетках?

Question

Я совершенно новичок в сетках CSS.Мне нужно кодировать компонент из 2 столбцов, с текущими изображениями равной высоты внутри.Я мог бы сделать это с flexbox, но на этот раз мне нужна сетка CSS, и она должна быть отзывчивой.

Тем не менее, этот компонент имеет 2 изображения, по 1 на столбец.Исходные файлы 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

Исходные файлы 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>