How to scale elements and their layout with CSS "zoom"
- Published at
- Updated at
- Reading time
- 1min
You probably know that you can use the scale function scale() or even just scale property to transform and change an element's size.
The thing with scale is that it only changes visual appearance and the layout size of the target element remains the same.
Today I learned there's also the zoom property. zoom "really" scales the element and its layout. Check this out!
zoom scales the element and its layout.transform: scale() scales visually but the layout footprint stays at 120×120.What's the browser support?
It's pretty green!
I can totally see contrained situations when this can come in handy, but you should avoid animating it, because browsers probably don't appreciate the layout shift.
Join 6.5k readers and learn something new every week with Web Weekly.
Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.