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

You need to specify the original width and height:

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.