如何通过JavaScript获取CSS zoom缩放后图片的实际尺寸？

问题场景 #

给图片设置CSS zoom 属性做缩放后，直接用 img.height 或 img.width 获取到的是图片原始尺寸，而非页面上实际显示的大小，怎么解决这个问题？

可行解决方案 #

有两种可靠方式可以拿到缩放后的实际尺寸：

方法1：用getBoundingClientRect() API #

这个方法会返回元素在视口中的真实布局尺寸，已经自动包含了zoom以及其他CSS变换的影响，是最通用的方案。

示例代码：

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

box.innerHTML += "<br />实际显示高度: " 
    + rect.height +
    "px<br />实际显示宽度: "
    + rect.width + "px";

方法2：计算缩放比例×原始尺寸 #

先获取元素的zoom值，转成小数后和原始尺寸相乘，就能得到实际显示的大小。

示例代码：

var img = document.getElementById('img');
var box = document.getElementById('box');
// 获取zoom值，默认缩放比例为1
var zoom = parseFloat(window.getComputedStyle(img).zoom) || 1;
var actualHeight = img.height * zoom;
var actualWidth = img.width * zoom;

box.innerHTML += "<br />实际显示高度: " 
    + actualHeight +
    "px<br />实际显示宽度: "
    + actualWidth + "px";

方法对比 #

• getBoundingClientRect() 适配性更强，除了zoom，还能处理transform: scale()这类其他尺寸变换场景；
• 比例计算法只针对zoom属性，逻辑更直接，但如果元素同时有其他变换，结果可能不准确。

完整示例代码 #

HTML #

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

CSS #

#img{zoom:20%}

JavaScript（结合方法1） #

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

// 先展示原始尺寸
box.innerHTML += "原始高度: " + img.height + "px<br />原始宽度: " + img.width + "px";

// 再展示实际显示尺寸
var rect = img.getBoundingClientRect();
box.innerHTML += "<br />实际显示高度: " + rect.height + "px<br />实际显示宽度: " + rect.width + "px";

内容的提问来源于stack exchange，提问作者Mike