@denism300

Как расположить несколько фото в ряд, выровняв их по высоте?

Есть конструкция вида:
<p class="text-center page-imglist">
<a href="pic1.jpg" data-fancybox="group1"> <img src="pic1.jpg"> </a> 
<a href="pic2.jpg" data-fancybox="group1"> <img src="pic2.jpg"> </a>
</p>

Основная проблема в том, что соотношение пропорций у фото разное. К примеру, первая может быть 4:3, а вторая 3:4.
Как их расположить в ряд, так, чтобы высота была одинаковой, а ширина подбиралась пропорционально?
Если задать max-height явно, к примеру, 200px, то с фотками первая 4:3, вторая 3:4 работает, а фотки, к примеру,
первая 4:3, а вторая 9:16, уже переносятся на следующую строку.
  • Вопрос задан
  • 49 просмотров
Решения вопроса 1
@vardoLP
Ват ю сэй эбаут май мама?!
ну тут либо делать у родительского блока точную высоту, потом задавать ему overflow:hidden; а img задавать height:100% но тогда она будет обрезаться по высоте.

либо делать изображения фоном для родительского блока и ему указывать background-size:cover; тогда оно будет растягиваться по содержимому.

Чтобы увидеть полную картинку, можно сделать клик по блоку и показывать в всплывающем окне полную картинку. Но это все зависит от назначения изображения
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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