如何在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'); 

，但它很可能會弄亂圖像的長寬比。要做到這一點，你必須得到圖像的尺寸，並找出哪些比例會產生你想要的邊距而不改變高寬比。這將需要更多的代碼。