sarpay
6/13/2015 - 8:42 AM

[jscript] Get dimensions of any image

[jscript] Get dimensions of any image

Get dimensions of any image.js
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style type="text/css">
	img {
	  width: 299px;
	  height: 449px;
	  display: block;
	  margin: 10px auto;
	}

	output {
	  text-align: center;
	  font-family: Arial, sans-serif;
	  font-weight: bold;
	  display: block;
	  line-height: 1.5;
	}
  </style>
  <script type="text/javascript">
  	var myImg = document.querySelector('img'),
	    op    = document.querySelector('output');

	op.innerHTML = 'Computed width: ' + getComputedStyle(myImg).getPropertyValue('width') + 
       '<br>' + 'img.width: ' + myImg.width + 
       '<br>' + 'getAttribute(width): ' + myImg.getAttribute('width') + 
       '<br>' + 'img.naturalWidth: ' + myImg.naturalWidth;
  </script>
</head>
<body>
  <img src="https://placekitten.com/g/400/600" width="300" height="450">
  <output></output>
</body>
</html>