3

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?

Pierre
  • 18,643
  • 4
  • 41
  • 62
galer88
  • 240
  • 4
  • 15
  • 1
    Could you give a piece of code to reproduce what you do? And I guess you've had a look at the pages recomended here: http://stackoverflow.com/questions/4049342/how-can-i-zoom-a-div-in-firefox-and-opera – Nikodemus RIP Dec 09 '11 at 12:55

3 Answers3

4

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)
Pierre
  • 18,643
  • 4
  • 41
  • 62
  • Note that you need to query the property value per browser prefix (unless you're for sure in Chrome / Safari), here's how I took this a bit further for my purposes (discussed in this question http://stackoverflow.com/questions/9791403/how-to-get-actual-not-original-height-of-a-css-rotated-element): http://jsfiddle.net/NPC42/nhJHE/ – NPC Mar 21 '12 at 13:28
2

Use element.getBoundingClientRect() its already answered here:

CSS3 how to calculate height and width after scale

Roy Shoa
  • 3,117
  • 1
  • 37
  • 41
1

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.

Pedro Carvalho
  • 11
  • 2
  • Using the dev tools in Chrome, an inspected element shows that the values are not the same when zoomed. Elements range in size depending on the zoom factor. – CaptainBli Jan 29 '16 at 18:44