使用 CSS3 缩放后获取元素的实际宽度和高度答案

【问题标题】：Get actual width and height of an element after being scaled using CSS3使用 CSS3 缩放后获取元素的实际宽度和高度
【发布时间】：2012-01-16 18:09:36
【问题描述】：

在 Firefox 中，我需要缩放包含文本和图像的 <div>。

使用-moz-transform: scale() 后，内容会在视觉上进行缩放，但在尝试使用 javascript 获取这些值时，<div> 仍会返回其原始大小。

此行为的任何解决方案？

【问题讨论】：

你能给出一段代码来重现你的工作吗？我猜你已经看过这里推荐的页面：stackoverflow.com/questions/4049342/…

标签： javascript css firefox

【解决方案1】：

如果您已经知道比例值，请使用一些 JavaScript 进行数学计算。将比例值乘以您获得的实际尺寸。 （960px 缩放到 0.5 = 480px）

如果不知道比例值，则需要使用getComputedStyle() 获取当前变换矩阵，然后进行数学运算。

var element = document.getElementById("divScaledToHalf"),
    style = window.getComputedStyle(element, ""),
    matrix = style.getPropertyValue("-moz-transform");

console.log(matrix); // matrix(0.5, 0, 0, 0.5, 0px, 0px)

【讨论】：

请注意，您需要查询每个浏览器前缀的属性值（除非您确定在 Chrome / Safari 中），这就是我为了我的目的而采取的更进一步的方法（在这个问题中讨论@ 987654321@): jsfiddle.net/NPC42/nhJHE

【解决方案2】：

当galer88说：

“使用 -moz-transform: scale() 后，内容在视觉上被缩放，但

在尝试使用 javascript 获取这些值时仍返回其原始大小。”

正在返回 DIV 的原始大小，因为实际上真正发生的是 ZOOM 而不是 SCALE。

当您缩放对象时，您应该逐字修改对象的宽度、高度和深度（在 3D 的情况下）以使其更小或更大。

另一方面，当您缩小或缩小时，您只需将相机的焦点移到更远或更靠近对象。缩放期间不影响对象的宽度、高度和深度（如果是 3D）。

请在 Pierre 的回答中查看可能的解决方案。

【讨论】：

使用 Chrome 中的开发工具，检查的元素显示缩放时值不同。元素的大小取决于缩放系数。

【解决方案3】：

使用element.getBoundingClientRect()这里已经回答了：

CSS3 how to calculate height and width after scale

【讨论】：