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

在Firefox中，我需要缩放包含文本和图像的<div>。使用CSS3缩放后获取元素的实际宽度和高度

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

这种行为的任何解决方案？

2011-12-09 galer88

可不可以给一段代码重现你做了什么？我想你已经看过这里推荐的网页：http://stackoverflow.com/questions/4049342/how-can-i-zoom-a-div-in-firefox-and-opera – Nikodemus

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

如果你不知道的刻度值，则需要使用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)

来源

2011-12-09 13:35:22 Pierre

请注意，你需要查询每个浏览器前缀的属性值（除非你确定在Chrome/Safari中），下面是我如何进一步为我的目的（在这个问题中讨论http://stackoverflow.com/questions/9791403/ how-to-get-actual-not-original-height-of-css-rotated-element）：http://jsfiddle.net/NPC42/nhJHE/ – NPC

当galer88说：

“使用-moz-改造后：规模（）的内容是视觉缩放但<DIV>仍然返回试图让使用javascript这些值时，它的原始大小。 “

DIV的原始尺寸正在返回，因为实际上真正发生的是缩放而不是缩放。当你缩放一个对象时，你应该从字面上修改对象的宽度，高度和深度（在3D的情况下）以使其变得更小或更大。

另一方面，当您放大或缩小时，只需将相机的焦点移回或靠近物体。对象的宽度，高度和深度（在3D情况下）在缩放过程中不受影响。

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

来源

2012-01-19 20:50:19

在Chrome中使用开发工具时，一个受检查的元素显示放大时值不一样。元素的大小取决于缩放系数。 – CaptainBli

使用element.getBoundingClientRect()它已经在这里找到答案：

CSS3 how to calculate height and width after scale

来源

2017-08-02 12:25:22

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

回答

相关问题