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.

If possible, is there a way to do this without knowing the original dimensions of the image (maybe determine this using Javascript/jQuery)?

Answer 1

You need to specify the original width and height:

<img src="/whatever" width="100" height="200" alt="Whatever" />

And then use something like this in the CSS:

#content img { max-width: 100%; height: auto }

You could try this with jQuery if you don't have the width and height up front, but your mileage may vary:

$(function(){
    $('#content img').load(function(){
       var $img = $(this);
       $img.attr('width', $img.width()).attr('height', $img.height());
    });
});

Obviously replace #content with whatever selector you want to scope the functionality to.

Answer 2

when setting up constant width use:

height: auto