Getting the width and height of an Image

by

So I have a element and I want to get the image’s height and width property, however this is my css:

let h = Number(window.getComputedStyle(document.getElementById('image')).getPropertyValue('height').replace('px',''));
let w = Number(window.getComputedStyle(document.getElementById('image')).getPropertyValue('width').replace('px',''));
console.log(`width`,w);
console.log(`height`,h);
img#image{
    z-index: 0;
    display: block;
    top: 0px;
    margin-left: auto;
    margin-right: auto;

    max-height: 100%;
    max-width: 100%;

    position: absolute;
    align-self: center;

    margin: auto;
    left: 0;
    right: 0;
}
<img src="src.jpg" id="image">

as you can see i didn’t set a height and width property because I don’t want the image to have a fixed width and height, so someone introduced me to use:

window.getComputedStyle(document.getElementById('image')).getPropertyValue('height')

and so I did, but it is not accurate from my experience:

JS:

let h = Number(window.getComputedStyle(document.getElementById('image')).getPropertyValue('height').replace('px',''))
let w = Number(window.getComputedStyle(document.getElementById('image')).getPropertyValue('width').replace('px',''))
console.log(`width`,w)
console.log(`height`,h)

here is the screenshot of the results it logged:
https://media.discordapp.net/attachments/244238416248569857/812200556403490847/Screenshot_1540.png?width=1067&height=600

and here is the screenshot of the actual width and height of the element:
https://media.discordapp.net/attachments/244238416248569857/812200556000313354/Screenshot_1541.png?width=1067&height=600

as you can see the image is 670 x 514 but it logged 459 as its height, anyone can help me with this problem?

15 thoughts on “Getting the width and height of an Image”

  1. This should help

    The problem is that your image need to be loaded first.

    const img = document.getElementById("img");

if(img.complete) {
   console.log(img.width, img.height)

} else {
  img.addEventListener('load', function() {
    

        const imageWidthRendered = this.width;
        const imageHeightRendered = this.height;
    
    console.log(imageWidthRendered, imageHeightRendered)
    });
 }
    <img id="img" src="https://source.unsplash.com/random/100x200">
    Reply

Leave a Comment