Make element behave same after css scaling

问题:

I'm manipulating divs with javascript all the time.

Sometimes I need to make those divs fit inside a container who's size is contantly changing.

One way to make that happen is to use css scaling. The problem with scaling is that it simply schrinks the picture of the element. The system continues to see the element the same way. So all location etc. become skewed. For instance, if I position the div to become top:0%, then if the element has been scaled down it will not go to zero percent but a bit below that, because the system thinks the div is bigger than its visuals show.

This change in behavior causes a lot of complications as the system is now making assumptions about the elements that simply dont hold true. It's bad programming.

I looked at the 'zoom' but the articles warned against using it.

Is there any way to scale elements and also keep the system updated on whats actually going on?

回答1:

The default transform-origin is 50% 50% (the middle of the element), so when you reduce the size of an element with scale, the edges are "retracted" from all sides towards the middle.

so the top left corner appears to move down and to the right. But if you set the transform-origin to 0% 0% (top left) only the right and bottom sides move.

Hope this helps!