Scaling Images Proportionally in CSS with Max-width

Question

Right now, I\'m using max-width to scale images to fit. However, they don\'t scale proportionally. Is there a way to cause this to happen? I\'m open to Javascript/jQuery.

<

Answer 1

Here's how to do it with no Javascript. Set your max-width to the length you want.

#content img { 
   max-width: 620px;
   height: auto;
}

This worked for me tested on a Mac with Firefox 28, Chrome 34 and Safari 7 when I had no width or height settings explicitly set in the img tags.

Don't set your width in CSS to 100% after the max-width setting as one person suggested because then any images that are narrower than the width of the container (like icons) will be blown up much larger than desired.