时间戳

首页 > 解决方案 > 在CSS中将大图像的高度限制为小图像的高度

html - 在CSS中将大图像的高度限制为小图像的高度

问题描述

我在一个 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%;
}

740px的 Amax-height在全尺寸视口中看起来很完美，但没有响应。我希望这可以在 CSS 中完成，并且没有用于更大图像的额外容器，但我不确定这是否可能。这是一个jsfiddle看看它的样子。

这些图像是网站的移动和平板电脑布局的屏幕截图，因此它们应该保留它们的比例 - 如果有更好的方法来显示这些，我也会采取其他想法！

标签： htmlcssimageheight

解决方案

根据父 div 设置它们的大小。看一下这个：

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

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

推荐阅读