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

Question

[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, уже переносятся на следующую строку.

Answer 1

[Юпитер Макс]

ну тут либо делать у родительского блока точную высоту, потом задавать ему overflow:hidden; а img задавать height:100% но тогда она будет обрезаться по высоте.

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

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