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

但它可能会弄乱图像的宽高比。要正确地执行此操作，您必须获取图像的尺寸，并确定在不改变纵横比的情况下，将产生所需边距的比率。这将需要更多的代码。