CODEWITHSUNDEEP
javascriptcssfirefox
galer88
galer88

Reputation: 240

Get actual width and height of an element after being scaled using CSS3

In Firefox, I need to scale a <div> containing text and images.

After using -moz-transform: scale() the content is visually scaled but the <div> still returns it's original sizes when trying to get these values using javascript.

Any solution for this behaviour?

Upvotes: 3

Views: 6829

Answers (3)

Roy Shoa
Roy Shoa

Reputation: 3195

Use element.getBoundingClientRect() its already answered here:

CSS3 how to calculate height and width after scale

Upvotes: 2

Pedro Carvalho
Pedro Carvalho

Reputation: 11

When galer88 says:

"After using -moz-transform: scale() the content is visually scaled but the <div> still returns it's original sizes when trying to get these values using javascript."

The DIV's original sizes are being returned because in fact what is really happening is a ZOOM and not a SCALE.

When you SCALE an object, you should literally modify the width, height, and depth (in case of 3D) of the object to make it smaller or larger.

When you ZOOM out or in, on the other hand, you simply move the camera's focus further back or nearer to the object. The object's width, height, and depth (in case of 3D) are not affected during zooming.

Please check a possible solution in Pierre's answer.

Upvotes: 1

Pierre
Pierre

Reputation: 19081

If you already know the scale value, do the math using a bit of javascript. Multiply the scale value by the actual sizes you are getting. (960px scaled to 0.5 = 480px)

If you don't know the scale value, you need to get the current transformation matrix using getComputedStyle() and then do the math. 

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)

Upvotes: 4

Related Questions