10

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

Osu
  • 1,137
  • 2
  • 18
  • 34

2 Answers2

13

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;
}
iRebel_85
  • 769
  • 6
  • 22
  • Thanks for this answer as it helped in a few spots. While making our site Mobilegeddon ready, I discovered that tweaking the width setting above to 100% gives me the best of all solutions: `#image-container-div img { max-width: 490px; max-height: 490px; height: auto; width: 100%; }` – Mike A May 05 '15 at 17:22
2

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.

UsAndRufus
  • 385
  • 5
  • 14