Question

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

我想知道是否有可能获得.jpeg / .png / .whatever图像文件的实际宽度以及向用户显示的宽度，这是，我希望能够知道是否由于max-width属性而调整图像大小。

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

Answer 1

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

Answer 2

＆＃13;

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

＆＃13;

img {
  max-width: 200px;
}

＆＃13;

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

＆＃13;

我把它放在一起，似乎有效。

这取决于JavaScript Image类型。我也用过＃34; onload＆＃34;而不是DOMContentLoaded，以便在查询图像时，我们可以确定它已经被加载，并且不需要等待其onLoad回调。

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

2 个答案: