CSS3を使って縮尺変更した後の要素の実際の幅と高さを取得

Question

Firefoxでは、テキストと画像を含む<div>の縮尺を変更する必要があります。

を使用した後、コンテンツは視覚的に拡大されますが、<div>は、JavaScriptを使用してこれらの値を取得しようとすると元のサイズを返します。

この現象の解決方法を教えてください。

Answer 1

スケール値が分かっている場合は、JavaScriptを使用して数式を実行してください。スケール値に実際のサイズを掛けます。 （960ピクセル幅は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は言う：コンテンツが視覚的にスケーリングされ、スケール（）が、<のdiv >はまだJavaScriptを使用して、これらの値を取得しようとしたとき、それは、元のサイズだ返す：-moz-変換を使用した後、」

を。 "

実際に起こっていることは実際にはズームであり、スケールではないため、DIVの元のサイズが返されています。

オブジェクトを拡大縮小するとき、オブジェクトの幅、高さ、奥行き（3Dの場合）を文字通り変更して、オブジェクトのサイズを小さくしたり大きくしたりする必要があります。

ズームアウトまたはズームインするときは、カメラのフォーカスをオブジェクトの後方または近くに移動するだけです。オブジェクトの幅、高さ、および深さ（3Dの場合）は、ズームの際に影響を受けません。

ピエールの答えで可能な解決策を確認してください。

Answer 3

使用element.getBoundingClientRect()そのすでにここに答えた：

CSS3 how to calculate height and width after scale