javascript - .offsetWidth、.width、.width() 等并不总是在自动调整大小的元素上正确返回

Question

我正在尝试根据 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。(或者 2，因为它有一个 1px 边框，这是唯一被拾取的部分，同样的交易。)问题肯定是宽度的抓取，而不是设置，正如警报测试的那样。

我需要调整这个 div 大小的原因是，如果图像标题比图像本身宽，图像标题就会换行。

我是否遗漏了一些明显的东西，要么是发生这种情况的原因，要么是解决我的问题的更好方法？

谢谢!

Answer 1

我认为问题在于您的图像必须在设置大小之前加载。你的 JS 会在此之前执行，但不可靠。尝试等待图像完成加载，然后再尝试设置大小:

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