@Denis9999

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

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

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

Какой подход использовать, чтобы решить эту проблему?
  • Вопрос задан
  • 317 просмотров
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Да вообще высоту не задавайте

https://jsfiddle.net/kf7a8kbx/

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


Если хотите, чтобы текст был всегда внизу блока, то маленьким div'ам тоже флекс, направление по колонкам
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Alexufo
@Alexufo
противоречивый, сложный, весь компьютерный.
А зачем вам маленькие картинки такие адаптивить? Если экран шире - то добавляйте элементов.
Ответ написан
Комментировать
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
https://webref.ru/css/background-size
cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.

contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Ответ написан
Комментировать
@Slavich_Khe
Попробуйте сделать через 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;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы