Chilly Bang Chilly Bang - 5 months ago 23
CSS Question

Get real width and height of website images

On every website there are plenty of oversized images. With

oversized
i mean that the real image's width and height are higher then the place, which is available for image by HTML and/or CSS rules. The cause is - images are downscaled by browser.

How is it possible to get the images from a webiste with their real and available sizes?

Answer Source

If I understand your post correctly, you can use naturalWidth and naturalHeight to determine an image's original dimensions.

img = document.getElementById('image');

img.addEventListener('load', function() { 
  console.log('width', img.naturalWidth);
  console.log('height', img.naturalHeight);
});
#image {
  width: 200px;
}
<img id="image" src="http://i.imgur.com/PDE3MLe.jpg" />