zoom

The zoom CSS property can be used to control the magnification level of an element. transform: scale() can be used as an alternative to this property.

The zoom CSS property scales the targeted element, which can affect the page layout. When scaling, the zoomed element scales from top and center when using the default writing-mode.

In contrast, an element scaled using scale() will not cause layout recalculation or move other elements on the page. If using scale() makes the contents larger than the containing element, then overflow comes into effect. Additionally, elements adjusted using scale() transform from the center by default; this can be changed with the transform-origin CSS property.

Syntax

css

/* Keyword values */
zoom: normal;
zoom: reset;

/* <percentage> values */
zoom: 50%;
zoom: 200%;

/* <number> values */
zoom: 1.1;
zoom: 0.7;

/* Global values */
zoom: inherit;
zoom: initial;
zoom: revert;
zoom: revert-layer;
zoom: unset;

Values

normal: Render this element at its normal size.
reset: Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing Ctrl - - or Ctrl + + keyboard shortcuts) to the document. Do not use this value, use the standard unset value instead.
<percentage>: Zoom factor. 100% is equivalent to normal. Values larger than 100% zoom in. Values smaller than 100% zoom out.
<number>: Zoom factor. Equivalent to the corresponding percentage (1.0 = 100% = normal). Values larger than 1.0 zoom in. Values smaller than 1.0 zoom out.

Formal definition

Initial value	`normal`
Applies to	all elements
Inherited	no
Computed value	as specified
Animation type	an integer

Formal syntax

zoom =
  normal | reset | <number> | <percentage>

Examples

Resizing paragraphs

In this example the paragraph elements are zoomed, on hovering a paragraph the zoom value is unset.

HTML

html

<p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p>

CSS

body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100vh;
}

css

.small {
  zoom: 75%;
}
.normal {
  zoom: normal;
}
.big {
  zoom: 2.5;
}
p:hover {
  zoom: unset;
}

Result

Resizing elements

In this example the div elements are zoomed using the normal, <percentage>, and <number> values.

HTML

html

<div id="a" class="circle"></div>
<div id="b" class="circle"></div>
<div id="c" class="circle"></div>

CSS

css

div.circle {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  vertical-align: middle;
  display: inline-block;
}
div#a {
  background-color: gold;
  zoom: normal; /* circle is 25px diameter */
}
div#b {
  background-color: green;
  zoom: 200%; /* circle is 50px diameter */
}
div#c {
  background-color: blue;
  zoom: 2.9; /* circle is 72.5px diameter */
}

Result

Creating a zoom control

In this example a select field is used to change the zoom level of the .

HTML

In this first block, of HTML, a select field is defined with the different zoom values to be used.

html

<section class="controls">
  <label for="zoom"
    >Zoom level
    <select name="zoom" id="zoom">
      <option value="0.5">Extra Small</option>
      <option value="0.75">Small</option>
      <option value="normal" selected>Normal</option>
      <option value="1.5">Large</option>
      <option value="2">Extra Large</option>
    </select>
  </label>
</section>

In this second block a not supported message is added that will be hidden if the browser supports zoom.

html

<p class="zoom-notice">CSS zoom is not supported</p>

The final block just defines the content that will be zoomed.

html

<section class="content">
  <h1>This is the heading</h1>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat inventore
    ea eveniet, fugiat in consequatur molestiae nostrum repellendus nam
    provident repellat officiis facilis alias facere obcaecati quos sunt
    voluptas! Iste.
  </p>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat inventore
    ea eveniet, fugiat in consequatur molestiae nostrum repellendus nam
    provident repellat officiis facilis alias facere obcaecati quos sunt
    voluptas! Iste.
  </p>
</section>

CSS

In this first block, of CSS, we are setting the starting value for the --zoom-level using custom properties and then using that as the value for zoom on the content block.

css

html {
  --zoom-level: normal;
}
.content {
  max-width: 60ch;
  margin: auto;
  zoom: var(--zoom-level);
}

.controls,
.zoom-notice {
  display: flex;
  justify-content: space-around;
}
.zoom-notice {
  color: red;
}

In this final CSS block we are checking to see if the browser supports zoom and if so setting the not supported message to diplay: none;.

css

@supports (zoom: 1) {
  .zoom-notice {
    display: none;
  }
}

JavaScript

This JavaScript watches for a change in the select field and sets the new value for --zoom-level on the content section, e.g. style="--zoom-level: 1.5;".

const zoomControl = document.querySelector("#zoom");
const content = document.querySelector(".content");
const updateZoom = () => {
  content.style = `--zoom-level: ${zoomControl.value}`;
};
zoomControl.addEventListener("change", updateZoom);

Result

Specifications

Specification
CSS Viewport Module Level 1 # zoom-property

Browser compatibility

BCD tables only load in the browser