Calculer la largeur d'une image en jQuery

Question

J'ai un image qui height es 100% du navigateur et width es auto . La largeur peut donc varier en fonction de l'image et de la résolution de votre écran.

Je veux donc calculer la largeur du navigateur qui n'est pas occupée par l'image.

.main-image img {
    width:auto
}

var winheight = $(window).height() ;

$('.main-image img').css('height', winheight) ;

Je pensais faire quelque chose comme ça, mais ça ne marche pas.

   var findimage = $('.main-image img');
   var imagewidth = findimage.clientHeight;
   console.log("image width is " + imagewidth);

Toutefois, cette returns " image width is undefined ". Que dois-je faire ?

Answer 1

Rappelez-vous qu'une image ne fait pas partie du balisage, et qu'elle doit donc être chargée avant que vous ne puissiez récupérer sa largeur.

$('.main-image img').onload(function () {
    console.log("image width is " + $(this).width());
});

Answer 2

Essayez d'utiliser

$('.main-image img').width()
$('.main-image img').height()

et utiliser Offset pour le positionnement à gauche/en haut