如何在不知道它們的尺寸的情況下並排在 flexbox 中使圖像具有相同的高度

Question

我想制作 2 張不同寬度的圖像，並排顯示相同的高度，最好在一個 flex 框中。

如果我知道圖像尺寸（962x706 和 962x1275），則以下內容有效。

有沒有辦法在不知道它們的尺寸的情況下做到這一點？

<div style="display: flex; margin: 0 -5px">
    <div style="flex: calc(962/706); margin: 0 5px">
        <img src="https://i.stack.imgur.com/H7QKE.jpg"/>
    </div>
    <div style="flex: calc(962/1275); margin: 0 5px">
        <img src="https://i.stack.imgur.com/nsyuX.jpg"/>
    </div>
</div>

img {
  width: 100%;
}

為方便起見的小提琴https://jsfiddle.net/b1f6v3kc/

Answer 1

設置對象適合的最小高度將裁剪圖像，避免失真

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

 <div style="display: flex; margin: 0 -5px"> <div style=" margin: 0 5px"> <img src="https://i.stack.imgur.com/nsyuX.jpg"/> </div> <div style=" margin: 0 5px"> <img src="https://i.stack.imgur.com/H7QKE.jpg"/> </div> </div>

Answer 2

您可以為所有圖像設置固定高度或使用 javascript 來了解尺寸。 您必須考慮到，如果您修改高度，則只有縱橫比會發生變化，並且圖像可能看起來很糟糕

<div style="display: flex; margin: 0 -5px">
    <div style="margin: 0 5px">
        <img src="https://i.stack.imgur.com/nsyuX.jpg"/>
    </div>
    <div style="margin: 0 5px">
        <img src="https://i.stack.imgur.com/H7QKE.jpg"/>
    </div>
</div>

img {
  width: 100%;
  height: 300px;
}

https://jsfiddle.net/xsn07yaw/