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

Question

我在HTML文档中有几个图片元素。由于应用了max-width CSS属性，这些元素的宽度经常会发生变化。

我想知道是否可能同时获取.jpeg/.png/.whatever图像文件的真实宽度和向用户显示的宽度，也就是说，我想知道这些图像是否因为max-width属性而被调整大小。

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

- dzz

---

为什么不创建一个离屏元素并使用它来确定宽度？ - Brad

重复的问题：https://dev59.com/3mkv5IYBdhLWcg3wnB87 - nstCactus

参见https://dev59.com/cnRC5IYBdhLWcg3wXP0C可能会有所帮助。 - magritte

@Brad，在我看来，这似乎是一个非常糟糕的方法。 - dzz

@monq，欢迎来到Web开发领域... - Brad

可能是Get image size after resize JavaScript的重复问题。 - ecatmur

Answer 1

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>

我刚刚把这个东西组合起来，看起来好像可以工作。

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

- Katana314

Answer 2

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

- dzz

---

据我所知，naturalWidth/Height 在IE<9中没有实现。目前为止，更安全的做法是将图像测量到页面之外 - 或者至少作为回退机制。 - svidgen

@svidgen 我有一个问题：为什么IE不自动更新到最新版本？或者为什么人们会使用比最新版本更低的浏览器？这是我永远无法理解的事情。 - Ms. Nobody

@Ms.Nobody，作为曾经尝试在一个疯狂的周末调试自动Chrome更新的人，因为随机引入的Flash不兼容/安全对话框使得每个人都无法使用我们的产品，我可以向您保证；这是有合理原因的。 - Katana314