CODEWITHSUNDEEP
htmlcss
Becky
Becky

Reputation: 5605

Fit multiple images to parent height while maintaining its aspect ratio

How do I make these 3 images fit to its parent div height while maintaining the image's aspect ratio?

enter image description here

<div id="myM">
     <div class="ab">
        <img src="http://img42.com/2lWNS+" class="cd"/>
        <img src="http://img42.com/2lWNS+" class="cd"/>
        <img src="http://img42.com/2lWNS+" class="cd"/>
     </div>
</div>

css:

#myM{
    width: 300px;
    height: 200px;
    background-color: cyan;
}
.ab{
    width: 100%;
    float: right;
}
.cd{
    max-height:33%;
    width:auto;
}

Here is a Fiddle

Upvotes: 2

Views: 656

Answers (1)

IMP1
IMP1

Reputation: 280

I think the problem is with the float removing the container from the flow. Instead, you can make the container an inline-block and use right-align.

https://jsfiddle.net/9uyww2j0/2/

Without changing your HTML, my new CSS is this:

#myM{
    width: 300px;
    height: 200px;
    background-color: cyan;
    text-align: right;
}
.ab {
    display: inline-block; /* So text-align affects it */
    height: 100%
}
.cd{
    display: block; /* So takes full width */
    height:33%;
}

Upvotes: 1

Related Questions