.offsetWidth, .width, .width() 등이 자동 크기 조정 요소에서 항상 올바르게 반환되지 않는 경우

Question

div에 포함 된 이미지의 너비에 따라 div의 크기를 조정하려고하지만 JS를 가져 오는 방법이 없습니다. 이미지의 너비가 일관되게 작동하는 것 같습니다.

<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}); 

나는 .style.width이 .width는, .offsetWidth는, .width()는 .outerWidth(), 이들 각각에 대해 .getBoundingClientRect.width(), 그것은 정확하게 시간의 일부 이미지의 폭을 잡고 함께 노력했지만, 다른 시간은 0으로 이미지의 폭을 갖는다. (또는 1px 경계선을 가지고 있기 때문에 2 번, 동일한 거래가 발생하는 유일한 부분입니다.) 문제는 경고로 테스트 한 것처럼 설정이 아닌 너비를 확실히 차지합니다.

이 div의 크기를 조정해야하는 이유는 이미지 캡션이 이미지 자체보다 더 넓은 경우 이미지 캡션이 줄 바꿈되도록하는 것입니다.

명백한 문제가 있습니까?이 문제가 발생했거나 더 나은 방법으로 문제를 해결할 수 없습니다.

감사합니다.

Answer 1

크기가 설정되기 전에 이미지를로드해야한다는 것이 문제라고 생각합니다. JS는 이러한 일이 발생하기 전에 실행되지만 신뢰할 수는 없습니다. 크기를 설정하기 전에 이미지로드가 완료 될 때까지 기다리십시오.

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