Comment utiliser animate() dans jQuery pour augmenter la taille d'une image par rapport à la taille de la page?

Question

Donc, ce augmente la taille de l'image, par rapport à la taille originale de l'image:

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

Comment puis-je augmenter, soit 80% de la fenêtre de l'utilisateur (cela devrait fonctionner si l'utilisateur a un moniteur de résolution 800px ou un moniteur de résolution 1680px).

De même, comment «centrer» l'image dans la page. Donc, augmenter à 80% et centre.

Merci.

Answer 1

Ceci est un début ...

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

mais il gâchera probablement vers le haut le ratio d'aspect de l'image. Pour le faire correctement, vous devrez obtenir les dimensions de l'image et déterminer quel rapport donnera les marges que vous voulez sans modifier le rapport d'aspect. Cela nécessitera un peu plus de code.