Get both the real and shown width of an image using 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.

Why don't you create an element off-page and use that to determine width? — Brad, May 15 '13 at 19:11
Duplicate of http://stackoverflow.com/questions/10478649/get-actual-image-size-after-resizing-it and — nstCactus, May 15 '13 at 19:12
see also http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome could help — magritte, May 15 '13 at 19:13
possible duplicate of [Get image size after resize JavaScript](http://stackoverflow.com/questions/7682772/get-image-size-after-resize-javascript) — ecatmur, May 16 '13 at 08:11

score 0 · Accepted Answer · answered May 15 '13 at 19:22

0

The answer (pointed by someone who just deleted it) is to use naturalWidth.

answered May 15 '13 at 19:22

dzz

327
3
12

FYI, naturalWidth/Height aren't implemented in IE<9 to the best of my knowledge. It's safer (for now) to measure the image off-page -- or at least as a fallback mechanism. – svidgen May 15 '13 at 20:08
@svidgen I have one question: Why IE doesn't automatically update to latest version? Or why do ever people use lower version of any browser than the latest? This is one thing I can't ever understand. – Ms. Nobody May 16 '13 at 08:42
@Ms.Nobody As someone who once tried to do frantic weekend debugging of an automatic Chrome update that made everyone everywhere unable to use our product because of a randomly-introduced Flash incompatibility/security dialog, I can assure you; there are legitimate reasons. – Katana314 Oct 08 '14 at 20:16

score 0 · Answer 2 · answered Oct 08 '14 at 20:15

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.

Get both the real and shown width of an image using JavaScript

2 Answers2