Chrome is stretching the height of my max-width image

image-scaling css
Osu picture Osu · Mar 20, 2012 · Viewed 7.9k times · Source

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

iRebel_85 picture iRebel_85 · Feb 20, 2013

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;
}

Related questions

Scaling image with CSS Transition

This is how I want to scale my images, smoothly without any jumps. My attempt does not work like in the gallery above, the image (red square in my case) jumps, my code: How to fix this? The red square …

Read More
How to scale an Image in ImageView to keep the aspect ratio

In Android, I defined an ImageView's layout_width to be fill_parent (which takes up the full width of the phone). If the image I put to ImageView is bigger than the layout_width, Android will scale it, right? But …

Read More
HTML img scaling

I'm trying to display some large images with HTML img tags. At the moment they go off the edge of the screen; how can I scale them to stay within the browser window? Or in the likely event that this …

Read More