Utiliser max-width = 100% et max-height = 100% sur une image, calculer la largeur/hauteur de l'affichage

Question

Je crée un diaporama pour les images de différentes tailles à afficher centré verticalement et horizontalement dans une zone de toile.

Dans mon CSS, j'ai défini la largeur et la hauteur de l'image à 100% afin que chaque image remplisse proportionnellement le canevas. Je souhaite que la zone de dessin s'auto-dimensionne pour correspondre à la taille d'écran du spectateur, car la taille d'origine des images est assez importante (jusqu'à 800 pixels de hauteur). J'utilise jQuery 1.4, et en utilisant la hauteur de l'image pour calculer la valeur maximale pour le positionnement absolu au milieu du canevas.

J'ai essayé d'utiliser jQuery pour obtenir le fichier .height(), innerHeight() et outerHeight(), mais il obtient toujours la taille complète de l'image.

J'ai extrait l'élément DOM de l'objet jQuery et essayé d'utiliser .width, .offsetWidth et .clientWidth, mais cela semble toujours renvoyer la taille complète de l'image. Firebug affiche les dimensions correctes, donc je sais qu'il y a un moyen de calculer la hauteur d'affichage réelle de l'image, je ne peux pas comprendre ce que c'est. Comment obtenez-vous la hauteur d'affichage réelle d'une image si vous avez défini max-height = 100%?

Je ne voulais pas avoir à calculer et à définir la hauteur de chaque image dans le js, mais si je le dois, je le ferai. Il semble juste que je devrais être en mesure de définir la taille de la toile et d'avoir les images à ajuster automatiquement.

Answer 1

Je suggère de ramener les images en mode automatique, puis d'obtenir les valeurs d'image, puis de les rétablir à 100%.

$('img').each(function(){ 
    var self = $(this); 
    self.hide() // Hide them, fading, you choose 
     .css({'width':'auto', 'height':'auto'}) // set them to auto. 
     .data('width', self.width()) // Now you can get the real size 
     .data('height', self.height()) // And store it as jQuery data in the image. 
     .css({'width':'100%', 'height':'100%'}) // Back to 100% 
     .show(); // Show them. 
}); 

ou, autrement

$('img').hide().css({'width':'auto', 'height':'auto'}) 
    .each(function(){ 
     var self = $(this); 
     self.data('width', self.width()) 
      .data('height', self.height()); 
    }) 
    .css({'width':'100%', 'height':'100%'}).show(); 

Ou pas besoin de les cacher, car sans doute le changement est trop rapide, mais vous pourriez avoir besoin de faire quelques ajustements à votre logique, de sorte que l'utilisateur doesn Ne vois pas un clin d'oeil, pendant le premier chargement.

de toute façon, choisissez votre poison.