I am trying to get three images of different widths to be the same height without compressing any. The image have the same height. I am really stuck! Any help would be much appreciated.
Here is the jsfiddle
https://jsfiddle.net/5Lbuxawg/
<style>
.shopi {
width:100%;
display: flex;
flex-direction: row;
align-items: flex-start;}
.shopi img {
width:auto;
height:100%;
}
.shopichild {width:100%;object-fit:contain;}
</style>
<body>
<div class="shopi">
<div class="shopichild "><img src="https://cdn.shopify.com/s/files/1/1640/3713/files/h1_400x.jpg" alt="natural" /></div>
<div class="shopichild "><img src="https://cdn.shopify.com/s/files/1/1640/3713/files/h2_400x.jpg" alt="natural" /></div>
<div class="shopichild "><img src="https://cdn.shopify.com/s/files/1/1640/3713/files/h3_600x.jpg" alt="natural" /></div>
</div>
Thanks