Изображения одинаковой высоты в flexbox с неизвестным соотношением сторон

Question

У меня есть изображения в горизонтальном гибком контейнере. Все они должны быть отзывчивыми, иметь одинаковую высоту, сохраняя соотношение сторон и не обрезаясь:

Это можно сделать с помощью этого CodePen : https://codepen.io/sarus/pen/PJGPmy

Основная проблема этого подхода заключается в том, что вам необходимо заранее знать аспект изображения ios всех изображений:

img {
  width: 100%;
  height: auto;
}

.pics_in_a_row {
  display: flex;
}

.img1 { flex: 1.3344; }
.img2 { flex: 1.3345; }
.img3 { flex: 0.7505; }

Is Есть ли способ заставить эту работу с произвольными изображениями и неизвестным аспектом rat ios, с чистым CSS (нет JavaScript)?

Answer 1

Вы можете использовать свойство css object-fit.

img {
  object-fit: cover;
  height:50px;
  width:100px;
  }