如何将并排图像调整为相同高度并仍然适合当前屏幕尺寸？

Question

我目前正在努力使并排图像变得动态，这样无论它们在什么屏幕上，它们都可以保持并排。然而，这些图像也有不同的比例；所以，我使用柔性显示类型来保持它们相同的高度。

这是我当前的 HTML：

<div class="row">
    <div class="column">
        <img src=(thefirstimage) alt="A picture of me."/>
</div>
    <div class="column">
        <img src=(thesecondimage) alt="Another picture of me."/>
    </div>
</div>

这是我的 CSS：

* {box-sizing: border-box;}
.column {
    display: flex;
    flex-direction: row;
    justify-content: center;
    float: left;
    height: 40vh;
    width: auto;
    padding: 5px;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

此时在我的电脑屏幕上，尽管纵横比不同，但图像在相同高度上正确并排。然而，当我在手机上查看同一页面时，一张图像会移动到另一张图像的上方。

总而言之，我试图一起解决的两个问题是：

• 将并排图像调整为相同高度
• 无论屏幕尺寸如何，都保持不变

我在这里看到了另外两篇文章，分别介绍了这两个内容，我只是无法让它一起工作。

提前谢谢！

Answer 1

您是否希望图像具有相同的高度，但保持其固有的纵横比，因此一个会比另一个宽？

或者您希望它们具有相同的宽度和高度，从而进行裁剪？如果这就是您想要的，这个答案可能会有所帮助。

.d1 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  height: 300px;
  
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="d1">
  <img src="http://picsum.photos/800/600">
  <img src="http://picsum.photos/600/800">
</div>