1

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/

TylerH
  • 20,799
  • 66
  • 75
  • 101
simonzack
  • 19,729
  • 13
  • 73
  • 118

2 Answers2

2

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>
Shawn W
  • 566
  • 4
  • 13
-1

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/

aconsuegra
  • 154
  • 1
  • 5