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

.offsetWidth，.width，.width（）等并不总是在自动调整大小的元素

1 个答案: