为什么我无法计算出具有自动宽度的元素的宽度？

Question

我正在尝试创建图像的横向幻灯片。包含幻灯片的面板正好是 1200 像素宽。在页面加载时，PHP 会在此面板中加载图像。图片的数量并不总是相同的，除非加载的图片的总宽度超过 1200px 容器的宽度，否则我不希望幻灯片开始播放。

问题是，所有图像的尺寸都不同，从 150x100 到 1980x1200 不等。通过将图像的高度设置为 50 并让它们的宽度自动重新缩放，图像可以适应条形图。

现在，用任何其他编程语言创建此幻灯片面板将很容易。不过，我在 javascript 中遇到了麻烦，因为我根本找不到任何方法来获取图像的新宽度。他们都使用 jQuery outerWidth() 读取 width: 0px

我什至尝试在图像之外的 1200px 面板内放置一个 div 包装器，希望 div 会自动缩放图像的宽度并给我它们的集体宽度，但它读取的是 1200px (jQuery outerWidth())

有什么方法可以测量它们的宽度吗？
有没有更简单的方法？

任何帮助表示赞赏

Answer 1

我猜您正在尝试在 document 准备好时获取宽度，而不是在图像加载之后。

尝试将获取outerWidth() 的代码放在$(window).load() 中。

$(window).load(function() {
    //get the image widths
});