5 ways to get Image width and height javascript examples


Image contains width and height based on resolution. Some times we need to find the width and height of an image using javascript and jquery.

Images are of different types png, JPEG and SVG.

This post covers how to find the image height and width in Javascript,Jquery and Nodejs

  • Using Jquery Selectors
  • Plain Javascript

Plain JavaScript to get height and width of an image

In Plain javascript, Two ways we can get height and width of an image

  • Image object
  • naturalHeight and naturalWidth

Image object

In javascript, We can use load the image using src attribute in javascript and calling width and height once image is loaded using onload function

Here is an example

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>

<body>
    <h3>Get Image Height and width</h3>
    <img width="200px" height="200px" src="demo.jpg">
</body>
<script>
    let img = new Image();
    img.onload = function() {
        console.log("Image Width: ", this.width)
        console.log("Image Height: ", this.height)
    };
    img.src = "demo.jpg";
</script>

naturalHeight and naturalWidth example

First querySelector of document object used to select an image tag querySelector method returns DOM object. Thas has following properties

  • naturalHeight
  • naturalWidth

These properties returns actual weight and height of an image not values of img tag with width and height values. For example, displayed an image using img tag in html

    <img width="200px" height="200px" src="demo.jpg" id="imageid">

Here is an javascript code to get source image height and width

    console.log("Image Width: ", document.querySelector("img").naturalWidth);
    console.log("Image Width: ", document.querySelector("img").naturalHeight)

and the output is

Image Width:  4793
Image Height:  3194

if you want to get the congigured styles of an width and height for an imag tag, Here is an exmaple

    console.log("Image Width: ", document.querySelector("img").offsetWidth);
    console.log("Image Width: ", document.querySelector("img").offsetHeight)

And the output:

Image Width:  200
Image Width:  200

And also we can use different selectors like getElementById to select an image

document.getElementById("#imageid").offsetWidth;
document.getElementById("#imageid").offsetHeight;

Jquery to find the real height and width of an image

In JQuery it is very easy to get height and width of an image that displayed with styles configured.

There is no direct method to retrieve the real source image height and width, We can get DOM element using selector of an image and can use naturalHeight and naturalWidth.

Here is an Jquery example

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>

<body>
    <h3>Get Image Height and width</h3>
    <img width="200px" height="200px" src="demo.jpg" id="imageid">

</body>
<script>
    $(document).ready(function() {
        console.log("Width: " + $("#imageid").width());
        console.log("Height: " + $("#imageid").height());
         var realValues = $("#imageid").;
               console.log("Real Width: " + realValues.naturalWidth);
               console.log("Real Height: " + realValues.naturalHeight;
                });
    });
</script>

Conclusion

To Sum Up, There are multiple ways we can find image height and width in javascript and jquery.

The above discussed about how to get real image height and widht as well as styles displayed to image like width and height.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.