Chrome is stretching the height of my max-width image

Question

I'm having trouble with setting the max-width of my images in a CMS I'm using. In Chrome (untested in other browsers yet), setting a max-width stretches the height of the image I insert - see here: http://www.literarykitchen.co.uk/events/testspace/

This is the code I'm using:

#content .pagebanner img { max-width:490px; }

Is there any reason why it's stretching like that? I thought maxwidth meant images scale in proportion?

Thanks

Osu

Answer 1

For those of you with this issue using display: flex on the parent element, your issue may be that you need to set align-items on the parent element to something other than the default of stretch, e.g. align-items: flex-start.

Answer 2

I had the same issue, My image gallery was dynamic and all the images were different sizes uploaded by the user. So I had to make sure this worked. What solved it for me was to set the max-width: , the max-height: , height: , and width: otherwise it didn't work for me.

Example:

#image-container-div img {
    max-width: 490px;
    max-height: 490px;
    height: auto;
    width: auto;
}