html - 如何使两个不同高度的图像在比例方面具有相同的高度？

Question

我搜索了所有内容，似乎每个示例，每个 Stack Overflow 答案都不适合我。我想使两个图像具有相同的高度，我已经使它们具有相同的宽度，并且例如可以使它们具有相同的高度，img {height: 400px;}但是我不希望那样，因为当屏幕分辨率更小或更大时可以看起来坏的。

我看到这可以通过使用 flex 或 grid 来解决，但我真的不想这样做，我知道有一个小解决方案或一个简单的 hack，但如果其他一切都失败了，我想我必须这样做。

这是 CSS 和 HTML 代码：

    .container {
      padding: 20px;
      margin: 20px;
      overflow: auto;
      text-align: center;
    }
    img {
    	padding:3px;
    	width: 49%;
    	object-fit:cover;
    	box-sizing: border-box;
    }

    <div class="container">
    <img src="https://www.w3schools.com/css/rock600x400.jpg"/>
    <img src="https://www.w3schools.com/css/paris.jpg"/>
    </div>

编辑：（添加了我尝试过的链接） 两个并排的 div - 流体显示 两个图像，并排响应 同一行上的两个图像具有相同的高度 CSS 如何使所有不同高度和宽度的图像相同通过 CSS？ CSS - 具有相同高度但图像高度不同的 Div 使具有不同纵横比的响应式图像具有相同的高度 + 更多。他们中的一些人使用 flex 其他人的桌子其他人他们将高度设置为常数，这不是我想要的。

谢谢

标签： htmlcss

Answer 1

尝试使用“em”或“rem”。这些调整取决于窗口的大小。