.offsetWidth, .width, .width() etc. ne retourne pas toujours correctement sur l'élément de taille automatique

Question

J'essaie de redimensionner un div en fonction de la largeur d'une image qu'il contient, mais aucune méthode JS pour saisir le la largeur de l'image semble fonctionner régulièrement.

<div class="main_image"> 
    <img class="wp-post-image" src=""> 
    <label>label here</label> 
</div> 

img { 
    width: auto; 
    height: auto; 
    max-width: 500px; 
    max-height: 450px; 
} 

var newWidth = document.getElementsByClassName("wp-post-image"[0].offsetWidth; 
$(".wp-post-image").parent(".main_image").css({"width": newWidth}); 

Je l'ai essayé avec .style.width, .width, .offsetWidth, .width(), .outerWidth(), .getBoundingClientRect.width() Pour chacun d'eux, il saisit correctement la largeur d'image de temps en temps, mais d'autres fois, il a la largeur de l'image 0. (Ou 2 parce qu'il a une bordure de 1px et c'est la seule partie qui est prise, même affaire.) Le problème est certainement la saisie de la largeur, pas le réglage, comme testé avec des alertes.

La raison pour laquelle je dois redimensionner cette div est que la légende de l'image s'enroulera si elle est plus large que l'image elle-même.

Y at-il quelque chose d'évident qui me manque, soit une raison pour laquelle cela se produit ou une meilleure façon de résoudre mon problème?

Merci!

Answer 1

Je crois que le problème est que votre image doit charger avant que la taille est définie. Votre JS s'exécute avant que cela n'arrive, mais pas de manière fiable. Essayez d'attendre le chargement de l'image avant de tenter de définir la taille:

$('img').on('load', function() { 
    var newWidth = $(".wp-post-image").first().width(); 
    $(".wp-post-image").parent(".main_image").css("width", newWidth); 
});