Как сделать изображения одинаковой высоты в flexbox бок о бок, не зная их размеров

Question

Я хотел бы сделать 2 изображения различной ширины, отображать их на одной и той же высоте в идеале в гибком боксе.

Следующие работы работают, если я знаю размеры изображения (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/