Задать вопрос
@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 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
  • beONmax
    Курс HTML / CSS
    1 месяц
    Далее
  • Бруноям
    Вёрстка на HTML и CSS
    3 месяца
    Далее
  • Международная Школа Профессий
    Онлайн-курсы HTML и CSS для начинающих
    3 недели
    Далее
  • Stepik
    Основы вёрстки с HTML и CSS
    1 неделя
    Далее
  • beONmax
    Верстальщик сайтов - HTML, CSS, Bootstrap, JavaScript
    1 месяц
    Далее
Решения вопроса 1
@vardoLP
Ват ю сэй эбаут май мама?!
ну тут либо делать у родительского блока точную высоту, потом задавать ему overflow:hidden; а img задавать height:100% но тогда она будет обрезаться по высоте.

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

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

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

Похожие вопросы