是否有可能使div中包含的图像的实际宽度变小？

Question

假设我的图片的实际宽度为1000px，但CSS中的宽度设置为100％，并且包含在500px宽div中。

有没有办法让jQuery知道图像实际上是1000px宽，即使它的页面宽度只有500px？

Answer 1

是的，使用naturalWidth：

var realWidth = imgElement.naturalWidth;

Answer 2

您可以做的是创建一个具有相同src离页的新图像，并对其进行衡量。

例如，如果您现有的img元素包含id "foo"，那么：

$("<img>")
    .css({
         position: "absolute",
         left: -10000,
         top: 0
    })
    .on("load", function() {
        var realWidth = this.width;
        var realHeight = this.height;
        $(this).remove();

        // Use `realWidth` and `realHeight` here
    })
    .appendTo(document.body)
    .attr("src", $("#foo").attr("src"));