Ограничение высоты большого изображения до высоты меньшего изображения в CSS

Question

У меня есть два изображения, центрированные рядом в div. Оба ограничены свойством max-width, но одно изображение значительно выше другого. Я бы хотел, чтобы более высокое изображение соответствовало высоте меньшего изображения , а регулировало его размер в зависимости от размера области просмотра.

Мой текущий код следующий для контейнера

<div class="process">
   <img src="http://via.placeholder.com/926x2260">
   <img src="http://via.placeholder.com/1584x1926">
</div>

с CSS как

.process {
    text-align: center;
}
.process img {
    margin: 4rem 3rem;
    display: inline-block;
    max-width: 40%;
}

A max-height из 740 пикселей выглядит превосходно с полноразмерным окном просмотра, но не реагирует. Я хотел бы, чтобы это было сделано в CSS и без дополнительного контейнера для большего изображения, но я не уверен, возможно ли это. Вот jsfiddle , чтобы увидеть, как это выглядит.

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

Answer 1

Сделайте их размер на основе родительского div. Проверьте это:

.process {
    text-align: center;
    height: 70vh;
}

.process img {
    margin: 4rem 3rem;
    display: inline-block;
    width: auto;
}