'How do I make images the same height in a flexbox side-by-side, without knowing their dimensions [duplicate]

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/

htmlcssflexbox


Solution 1:[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>

Solution 2:[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/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Shawn W
Solution 2 aconsuegra

Related Questions