Is it possible with jQuery to dynamically resize an image based on the width of it's parent DIV?

Question

I have a DIV tag that will be 500px in width. Content is coming via an RSS feed that includes images. Some of these images are wider then 500px which destroys the layout. Is it possible to use a bit of jQuery to resize images on the fly if they exceed 500px in width and keep the ratio proportionate?

Thanks for any suggestions.

Answer 1

try

$('img').load(function(){
    $(this).css('width', function(i,width){
        return (parseInt(width) > 500)? '500px':width;
    });
})

required jQuery 1.4