javascript - 使用 JavaScript 获取图像的实际宽度和显示宽度

Question

我在 HTML 文档中有几张图片。max-width由于应用于所有元素的 CSS 属性，这些元素的宽度通常会被修改。

我想知道是否可以获得 .jpeg/.png/.whatever 图像文件的实际宽度和显示给用户的宽度，我想知道图像是否由于 max-width 属性而正在调整大小。

页面加载后使用 JavaScript 调整图像大小而不是使用max-width是不可接受的。

Answer 1

答案（由刚刚删除它的人指出）是使用naturalWidth。

Answer 2

window.addEventListener("load", function() {
  var imgs = document.querySelectorAll('img');
  for (var i = 0; i < imgs.length; i++) {
    var imgTag = imgs[i];
    var image = new Image();
    image.src = imgTag.src;
    output.innerHTML = "Width: " + image.width + " Height: " + image.height;
  }
});

img {
  max-width: 200px;
}

<img src="http://www.google.com/images/srpr/logo11w.png"/>
<p id="output"></p>

我只是把它放在一起，它似乎工作。

这取决于 JavaScriptImage类型。我还使用了“onload”而不是 DOMContentLoaded，这样在查询图像时，我们可以确定它已经被加载并且不需要等待它的 onLoad 回调。