Question

我正在尝试将三个宽度不同的图像设为相同的高度，而不进行压缩。图像具有相同的高度。我真的被卡住了！任何帮助将不胜感激。

这是jsfiddle

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

Answer 2

align-items: stretch;

对齐项目拉伸可以将flex子代扩展到相同的高度。请重新阅读下面的代码段。

.shopi {
        width:100%;
        display: flex;
        flex-direction: row;
        //align-items: flex-start;
        align-items: stretch;}
.shopi img {
        width:auto; 
        height:100%; 
        }
.shopichild {
width:100%;
}

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

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

2 个答案: