Limit the size of imag with percent unit in attribute to the container that contain the images

Issue

I have three images inside a div, one of them has bigger height than the others. Can i "tell" to all the images height to be no more than 50%/70% of the div they are in, so, the image with the bigger height will change accordingly?

  <div class="images">
            <img src="https://images-us.bookshop.org/ingram/9781640094765.jpg?height=500&v=v2" alt="a book">
            <img src="https://images-us.bookshop.org/ingram/9781565842632.jpg?height=500&v=v2" alt="a book">
            <img src="https://images-us.bookshop.org/ingram/9780805050271.jpg?height=500&v=v2" alt="a book">
        </div>

css

.images {
    display: flex;
    justify-content: space-around;
    align-items:flex-end;
    border: 5px solid blue;
}

.images img {
    max-height: 50%;
    

}

Solution

You have to add height to container in order to use percantages with max-height on child elements. Without height on container child elements don't know from what to calculate the height, since container height is adopting to child elemements.

So something like this would solve your problem:

.images {
    display: flex;
    justify-content: space-around;
    align-items:flex-end;
    border: 5px solid blue;
    height: 500px;
}

.images img {
    max-height: 50%;
}

Answered By - gagz