CSS zoom

The zoom property scales the rendered size of an element. It has broad browser support today, but it should be used carefully because it can affect layout differently from transform: scale().

Syntax

zoom: normal;
zoom: 1;
zoom: 1.5;
zoom: 150%;

Example

.preview { zoom: 1.25; }

Result:

Scaled with zoom

Zoom vs transform

zoom affects layout size. transform: scale() changes visual rendering after layout, so surrounding elements may still behave as if the element kept its original size.

Common use

Prefer responsive CSS, font-size, width and transform for most layouts. Use zoom only when you specifically want its layout behavior.