Высота в процентах для изображений разных размеров?

Question

[Denis9999]

Нужно адаптивно сверстать вот такой вот блок:

Картинки немного разных размеров, поэтому при одинаковой ширине изображений, их высота отличается.
Необходимо прописать высоту изображений, чтобы все это выровнять.

Но получается замкнутый круг. Так как высота элементов задаваемая в процентах рассчитывается исходя из высоты родителя. А родителю фиксир. высоту тоже не задашь - адаптива не получиться. И так далее до основного блока, содержащего весь этот контент.

Какой подход использовать, чтобы решить эту проблему?

Answer 1

[Ankhena]

Да вообще высоту не задавайте

https://jsfiddle.net/kf7a8kbx/

.wrapper{
  display: flex;
  justify-content: space-between;
}
.wrapper div {
  background: #999;
  width: 20%;
}
img {
  width: 100%;
}

Если хотите, чтобы текст был всегда внизу блока, то маленьким div'ам тоже флекс, направление по колонкам

Comments

[Denis9999]

Спасибо, спасли) но высоту все таки нужно задавать - https://jsfiddle.net/8em1jd6m/

Answer 2

[Александр Борисович]

А зачем вам маленькие картинки такие адаптивить? Если экран шире - то добавляйте элементов.

Answer 3

[xmoonlight]

https://webref.ru/css/background-size

cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.

contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

Answer 4

[MeloD]

Попробуйте сделать через background-size: cover

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>

  ...
</div>

.item {  
  background: url(...);
  background-size: cover;
  display: inline-block;
  width: 25%;
  height: 100px;
}