如何在jQuery中使用animate（）来增加图像相对于页面大小的大小？

Question

因此，这增加了图像的大小，相对于图像的原始大小：

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

如何提高呢，再说了用户的窗口的80％（这应该工作，如果用户有800px分辨率的显示器或1680px分辨率的显示器）。

此外，我如何'中心'的图像在页面中。所以增加到80％和中心。

谢谢。

Answer 1

这是一个开始......

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

，但它很可能会弄乱图像的长宽比。要做到这一点，你必须得到图像的尺寸，并找出哪些比例会产生你想要的边距而不改变高宽比。这将需要更多的代码。