CODEWITHSUNDEEP
htmlcssflexbox
Stifboy
Stifboy

Reputation: 247

Align Images of same height and different width

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

Upvotes: 0

Views: 960

Answers (2)

Kranthi Yelamanchili
Kranthi Yelamanchili

Reputation: 26

Try this.

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

Upvotes: 1

Narayanan Ramanathan
Narayanan Ramanathan

Reputation: 1400

align-items: stretch;

Align items stretch can expand the flex children to same height. Please refre the code snippet below.

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

Upvotes: 2

Related Questions