/  Technology   /  Get Image Size (Height & Width) using JavaScript?
Get Image Size (Height & Width) using JavaScript?

Get Image Size (Height & Width) using JavaScript?

 

In javaScript Element.clientHeight and Element.clientWidth are used to retrieve an image’s height and width, respectively. It uses the width properties.

Element.clientHeight: Using this property, we can get access to an element’s inner height. The padding is included in this height but not the margin or border.

Element.clientWidth: Using this property, we can get access to an element’s inner width. The padding is included in this width but not the margin or border.

Note: Since the element in this case is an image, the values image.clientHeight and image.clientWidth will be utilised to determine the picture’s height and width, respectively.

Getting image size is one example.

<!DOCTYPE html>
<html>
  <head>
  <title>Get image size (height / width) using JavaScript</title>
  <script type="text/javascript">
    function getSize(){
      var img = document.getElementById("myImg");
      var width = img.clientWidth;
      var height = img.clientHeight;
      document.write("Flowers image Width is =" + width + "<br><br>  " + "Flowers image Height is  =" + height);
      alert("Width =" + width + ", " + "Height =" + height);
    }
  </script>
  </head>
  <body>
    <h3 style="color:blue"> Please click the image twice to view it in its full size.</h3>
    <img src="Flowers.jpg" id="myImg" ondblclick="getSize()">
  </body>
</html>

In the above code We have an click event declared to an image, when the image is clicked twice it displays the height and width of the image in an alert pop up using the element.clientWidth and element.clientHeight properties which are assigned in the function getSize(). Thus on on the getSize() function the user gets to see the width and height of the clicked image.

Outputs:

Get Image Size (Height & Width) using JavaScript?

Leave a comment