如何在不知道它们的尺寸的情况下并排在 flexbox 中使图像具有相同的高度

Question

I would want to make 2 images with different widths, displayed the same height side-by-side, ideally in a flex box.

The following works if I know the image dimensions (962x706 and 962x1275).

Is there a way to do this without knowing their dimensions?

<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%;
}

A fiddle for convenience https://jsfiddle.net/b1f6v3kc/

Answer 1

Setting a minimum height with object fit would crop the image, avoiding distortion

 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

You could set a fixed height for the all the images or use javascript to know the dimensions. You must take in count that if you modify the height only the aspect ratio change and the image could look bad

<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/