是否可以让 div 中包含的图像的实际宽度小于它？答案

【问题标题】：Is it possible to get the actual width of an image contained in a div smaller that it?是否可以让 div 中包含的图像的实际宽度小于它？
【发布时间】：2014-11-03 10:54:53
【问题描述】：

假设我有一个实际宽度为1000px 的图像，但它在CSS 中的宽度设置为100%，并且包含在500px 宽div 中。

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

【问题讨论】：

标签： jquery image width

【解决方案1】：

是的，使用naturalWidth：

var realWidth = imgElement.naturalWidth;

【讨论】：

哇。根据您的经验，它的支持程度如何？（例如，DOM2 HTML 中没有提到它，但这当然已经过时了。）
我个人没有遇到过问题，但值得指出的是，我纯粹是个业余爱好者，这样做是为了好玩（我知道，我知道......），所以我在跨浏览器支持问题方面的经验不如本网站上的大多数其他人。
即便如此，还是不错的！（这是我的 +1，我不知道 naturalWidth。）

【解决方案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"));

【讨论】：

但是这种方法不会立即被img { width: 100%; } 破坏吗？
@DavidThomas：如果有人有一个笼统的规则来设置 all img 元素的宽度，它可能会受到影响，是的。（不过，我认为您的具体示例不会影响上述内容。）
同意，我想我是在提出一个（潜在的）警告，而不是反对这种方法；我无法想象有人会想要拥有这样一个通用规则，同时还想找出图像的固有尺寸。