Is there any way to get the actual size of a zoomed image via javascript? After adding a css zoom affect to the image and then getting the size via JS it returns the original size.

var img = document.getElementById('img');
var box = document.getElementById('box')

box.innerHTML += "<br />height: " 
    + img.height +
    "px<br />width: "
    + img.width + "px";

#img{zoom:20%}

<div id="box">
  <img id="img" src=".Lt_KplHna5Rxc5JdcOAXuQHaHa?rs=1&pid=ImgDetMain" />
</div>

Is there any way to get the actual size of a zoomed image via javascript? After adding a css zoom affect to the image and then getting the size via JS it returns the original size.

var img = document.getElementById('img');
var box = document.getElementById('box')

box.innerHTML += "<br />height: " 
    + img.height +
    "px<br />width: "
    + img.width + "px";

#img{zoom:20%}

<div id="box">
  <img id="img" src="https://tse2.mm.bing/th/id/OIP.Lt_KplHna5Rxc5JdcOAXuQHaHa?rs=1&pid=ImgDetMain" />
</div>

https://codepen.io/tinkersncody/pen/dyxENwq

• javascript
• html
• css
• image

• Please, post a minimal reproducible example here, not on an external unreliable (not to criticize codepen, maybe it is very reliable and will last a thousand years. But we have no control on that), probably ephemere, site. Plus, SO already have the equivalent with snippets. – chrslg Commented Nov 19, 2024 at 0:24
• That's because they don't: the image doesn't change dimensions, only the image element does, so check the element's dimensions using the function mentioned by Timur. – Mike 'Pomax' Kamermans Commented Nov 19, 2024 at 1:23
• (And on a modern webdev note: don't use + for strings, don't use <br>, and don't set innerHTML unless you really need to set HTML code. Put a span in that div, and set its .textContent using template string syntax. E.g. const span = box.querySelector(`span`); span.textContent =`height: ${...}, width: ${...}`;) – Mike 'Pomax' Kamermans Commented Nov 19, 2024 at 1:25

1 Answer 1

You can use the getBoundingClientRect() method:

var img = document.getElementById('img');
var box = document.getElementById('box')

img.onload = () => {
  box.innerHTML += "<br />height: " 
    + img.getBoundingClientRect().height
    + "px<br />width: "
    + img.getBoundingClientRect().width
    + "px";
}

#img{zoom:20%}

<div id="box">
  <img id="img" src="https://tse2.mm.bing/th/id/OIP.Lt_KplHna5Rxc5JdcOAXuQHaHa?rs=1&pid=ImgDetMain" />
</div>

img.onload = () => {...} is added to make sure image is loaded before getting the values.