在CSS中将大图片的高度限制为小图片的高度

Question

我在div中并排放置了两个图像。两者都受@auth.requires_signature()属性的限制，但是一个图像比另一个图像高得多。我希望较高的图像与较小的图像的高度匹配，并根据视口大小调整其大小。

我当前的容器代码如下

max-width

CSS为

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

.process { text-align: center; } .process img { margin: 4rem 3rem; display: inline-block; max-width: 40%; } 为740像素，适合全尺寸视口，但无响应。我希望在CSS中完成此操作，并且没有用于显示较大图像的额外容器，但是我不确定是否可行。 这是jsfiddle，以查看其外观。

图片是网站的移动设备和平板电脑布局的屏幕快照，因此它们应保持其比例-如果有更好的显示方式，我也会采纳其他想法！

Answer 1

根据父div为其设置尺寸。检查一下：

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

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