对齐相同高度和不同宽度的图像

Question

我试图在不压缩任何图像的情况下，将三个宽度不同的图像设为相同的高度。图像具有相同的高度。我真的被卡住了！任何帮助将非常感激。

这是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>

谢谢

Answer 1

尝试这个。

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
.shopi {width:100%;display: flex;flex-direction: row;align-items: flex-start;}

.shopichild {
    width: 45%;
    margin: 10px;
    background-position: center!important;
    background-size: 100%!important;
    background-repeat: no-repeat!important;
    height: 420px;
    margin-top: 60px;
}

</style>
</head>

<body>
<div class="shopi">
<div class="shopichild" style="background:url(https://cdn.shopify.com/s/files/1/1640/3713/files/h1_400x.jpg);"></div>
<div class="shopichild" style="background:url(https://cdn.shopify.com/s/files/1/1640/3713/files/h2_400x.jpg);"></div>
<div class="shopichild" style="background:url(https://cdn.shopify.com/s/files/1/1640/3713/files/h3_600x.jpg;"></div>
</div>
</body>
</html>