小编Sti*_*boy的帖子

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

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

这是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>
Run Code Online (Sandbox Code Playgroud)

谢谢

html css flexbox

0
推荐指数
1
解决办法
53
查看次数

标签 统计

css ×1

flexbox ×1

html ×1