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

Question

I have several images in an HTML document. The width of those elements is often modified due to a max-width CSS property that is applied to all of them.

I want to know whether it is possible to get both the real width of the .jpeg/.png/.whatever image files and the width that is being shown to the user, this is, I want to be able to know whether the images are being resized due to the max-width property or not.

Resizing the images with JavaScript after the page has loaded instead of using max-width is not acceptable.

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> 

I just put this together, and it seemed to work.

It depends on the JavaScript Image type. I also used "onload" rather than DOMContentLoaded, so that when querying about the image, we can be certain that it's already been loaded and doesn't need to wait for its onLoad callback.