zoom

zoom magnifies an element and affects layout. It is now a standardized property with support in current major browser engines; older advice that treats all uses of zoom as an Internet Explorer hack is out of date.

Compare magnification with a transform

<p>Normal size</p>
<p class="zoomed">Zoomed size</p>
<p>Following content</p>

.zoomed {
  zoom: 1.5;
}
/* Optional presentation */
p {
  width: max-content;
  padding: 0.5rem;
  border: 1px solid #64748b;
}

The second paragraph grows, and its layout footprint changes. Try zoom: 1 and compare the following paragraph’s position. By contrast, transform: scale() changes the visual rendering without recalculating surrounding layout in the same way.

Values and defaults

A nonnegative number or percentage selects the magnification factor; 1 and 100% mean normal size. The initial value is 1, and the property is not inherited. Nonstandard keywords such as normal and reset are not recommended; reset can interfere with user zoom behavior.

A practical use

Use zoom only when the component actually needs magnification together with a changed layout footprint. For ordinary responsive sizing, prefer meaningful font-size, flexible dimensions, and responsive layout.

Accessibility and compatibility

Do not use component magnification to defeat browser zoom. Test at 200% browser zoom and narrow widths so controls and text remain available. Check MDN’s compatibility table if an older browser is part of the support contract; standardization does not make old installed browsers support the property.

A second working case

<p>Zoom changes occupied layout space:</p>
<div class="row">
  <span class="item magnified">Zoom</span><span class="item">Next</span>
</div>
<p>Transform keeps the original layout footprint:</p>
<div class="row">
  <span class="item scaled">Scale</span><span class="item">Next</span>
</div>

.row {
  display: flex;
  gap: 1rem;
  align-items: start;
  margin-block: 2rem;
}
.item {
  width: 4rem;
  padding: 0.5rem;
  background: #dbeafe;
}
.magnified {
  zoom: 1.5;
}
.scaled {
  transform: scale(1.5);
  transform-origin: top left;
}

Compare the following item’s position. Zoom changes the first item’s layout footprint; scale paints a larger item without reserving equivalent extra space. Neither should disable browser zoom.

Sources and browser support

MDN: zoom describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.