Search notes:

Determining dimensions (height and width) of an image with JavaScript

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <title>Image dimensions</title>

   <script type="text/javascript">

     function main() {

       let image = document.getElementById('image');
       let out   = document.getElementById('out'  );

       var widthShown  = image.width;
       var heightShown = image.height;

       var widthReal   = image.naturalWidth;
       var heightReal  = image.naturalHeight;

       out.innerHTML   = 'The size of the image on the screen is ' + widthShown + ' x ' + heightShown + ' pixels.<br>' +
                         'The real dimensions of the image is ' + widthReal + ' x ' + heightReal + ' pixels.';

     }

   </script>
  
</head>
<body onload='main()'>

  <img id='image' src="321x123.png" alt="321 x 123 pixels" width="642" height="246"/>
  <div id='out'></div>

</body>
</html>

Github repository about-html, path: /tags/img/dimensions.html

Determining dimensions (height and width) of an image with JavaScript

See also