The difference between zoom and scale | Hacker News Reader

The difference between zoom and scale

css-tip.com

11 pointst_afif6 comments

scale, which is an argument to transform, changes the size something is rendered but it takes the same space as it took before you scaled.

zoom changes the size it takes up in the page and draws it larger as well.

To put another way

    <div style="width: 10px; height: 10px; transform: scale(20)"></div>

takes 10x10 css pixels of layout space but is displayed scaled up 20x

    <div style="width: 10px; height: 10px; zoom: 20"></div>

makes the element take 200x200 css pixels of layout space AND displays it scaled up 20x

https://jsfiddle.net/zwL16koj/

It might sound confusing but scale is an argument to transform, it is not its own thing

    transform: scale(20) rotate(45deg) ...

you can use scale as an attribute independently from transform. this is essentially a shorthand but you can write `<div style="width: 10px; height: 10px; scale: 20"></div>` and it works just fine

A thumb-rule I try to ask developers/designers to do — Scale in CSS and leave the Zoom to the user.

More notably, Firefox only shipped the zoom property last year, so you shouldn’t rely on it for general-purpose web content for another year or so.

css noob here, sorry i still don't get it, perhaps a better visual showing what page layout looks like on both views

There is a sample on the page, but the difference is that scale preserves the original bounding box of the object, but zoom doesn’t. So with scale, the layout of the page won’t change at all. If you make it smaller it will just pad it with space to the original size.

Reply on news.ycombinator.com