How do I use animate() in jQuery to increase the size of an image relative to the size of the page?

Question

So this is increasing the size of the image, relative to the original size of the image:

$('img:first').fadeIn('normal').delay(500).animate({'height':'+=20%'}, 1500, 'easeOutQuad');

How do I increase it, to say 80% of the user's window (this should work if the user has an 800px resolution monitor, or 1680px resolution monitor).

Also, how do I 'center' the image in the page. So increase to 80% and center.

Thanks.

Answer 1

This is a start...

$('img:first').fadeIn('normal').delay(500).animate({
    'width': $(window).width() * .8,
    'height': $(window).height() * .8
}, 1500, 'easeOutQuad');

but it will likely mess up the image's aspect ratio. To do it properly, you'll have to get the dimensions of the image and figure out what ratio will yield the margins you want without altering the aspect ratio. That will require a bit more code.