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

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

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

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

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


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

.pics_in_a_row {
  display: flex;
}

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

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


html css flexbox responsive responsive-images
person avf    schedule 31.03.2020    source источник

Ответы (1)


arrow_upward
-1
arrow_downward

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

img {
  object-fit: cover;
  height:50px;
  width:100px;
  }
person Hamza Bouchikhi    schedule 31.03.2020
comment
Спасибо за Ваш ответ! К сожалению, это не то, что я спросил. Это дает изображениям фиксированную высоту и ширину. Кроме того, он обрезает изображения. Дайте мне знать, если я могу обновить вопрос, чтобы как-то уточнить. - person avf; 01.04.2020