Question

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

使用-moz-transform: scale()后，内容会按比例缩放，但<div>在尝试使用javascript获取这些值时仍会返回原始尺寸。

此行为的任何解决方案？

Answer 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)

Answer 2

当galer88说：

“在使用-moz-transform：scale（）之后，内容会在视觉上缩放，但是当尝试使用javascript获取这些值时，＆lt; div＆gt;仍会返回原始大小。”

DIV的原始尺寸正在退回，因为事实上真正发生的是ZOOM而不是SCALE。

当你对一个物体进行SCALE时，你应该逐字修改物体的宽度，高度和深度（如果是3D），使其变小或变大。

当您放大或放大时，另一方面，您只需将相机的焦点向后移动或更靠近物体。在缩放过程中，对象的宽度，高度和深度（如果是3D）不受影响。

请在皮埃尔的回答中查看可能的解决方案。

Answer 3

使用element.getBoundingClientRect()已在此处回答：

CSS3 how to calculate height and width after scale

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

3 个答案: