在Firefox中,我需要缩放包含文本和图像的<div>
。
使用-moz-transform: scale()
后,内容会按比例缩放,但<div>
在尝试使用javascript获取这些值时仍会返回原始尺寸。
此行为的任何解决方案?
答案 0 :(得分:3)
如果您已经知道比例值,请使用一些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)
答案 1 :(得分:1)
当galer88说:
“在使用-moz-transform:scale()之后,内容会在视觉上缩放,但是当尝试使用javascript获取这些值时,&lt; div&gt;仍会返回原始大小。”
DIV的原始尺寸正在退回,因为事实上真正发生的是ZOOM而不是SCALE。
当你对一个物体进行SCALE时,你应该逐字修改物体的宽度,高度和深度(如果是3D),使其变小或变大。
当您放大或放大时,另一方面,您只需将相机的焦点向后移动或更靠近物体。在缩放过程中,对象的宽度,高度和深度(如果是3D)不受影响。
请在皮埃尔的回答中查看可能的解决方案。
答案 2 :(得分:1)
使用element.getBoundingClientRect()
已在此处回答: