CODEWITHSUNDEEP
htmlcss
GibboK
GibboK

Reputation: 73918

How to scale a wrapper div and its inner content?

I need to scale up a div which contains other nested divs

Using zoom property works fine:

https://jsfiddle.net/aq11qjro/1/

But I know as some issue on Firefox browser, so I would like to use instead CSS scale property

Using transform: scale:

https://jsfiddle.net/aq11qjro/

I cannot get the desired effect.

What am I doing wrong here?

Upvotes: 1

Views: 2148

Answers (2)

GolezTrol
GolezTrol

Reputation: 116110

To increase the size to 250%, you should use scale(2.5, 2.5) instead of scale(2, 2):

But more importantly. transform: scale scales the div and centers it in its original space. Because it is larger in size, it will be outside of the screen. You can add transform-origin: top left; to specify that the top left corner of the scaled element should be anchored to the top left corner of the original space.

Updated fiddle with correct scale and transform-origin: https://jsfiddle.net/aq11qjro/7/

Upvotes: 2

vals
vals

Reputation: 64174

You need to set the origin to top left

transform-origin: top left;

fiddle

(edit: I linked the wrong fiddle: corrected)

Upvotes: 1

Related Questions