根据 JavaScript，缩放图像没有不同的尺寸

Question

有没有办法通过javascript获取缩放图像的实际大小？ 为图像添加 css 缩放效果，然后通过 JS 获取尺寸后，它会返回原始尺寸。

[代码笔示例][1] [1]：https://codepen.io/tinkersncody/pen/dyxENwq

Answer 1

您可以使用 getBoundingClientRect() 方法：

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.net/th/id/OIP.Lt_KplHna5Rxc5JdcOAXuQHaHa?rs=1&pid=ImgDetMain" />
</div>

添加

img.onload = () => {...}

以确保在获取值之前加载图像。