zoom
Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
The non-standard zoom
CSS property can be used to control the magnification level of an element. transform: scale()
should be used instead of this property, if possible. However, unlike CSS Transforms, zoom
affects the layout size of the element.
/* 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: unset;
Syntax
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. Only supported by WebKit (and possibly Blink).
<percentage>
-
Zoom factor.
100%
is equivalent tonormal
. Values larger than100%
zoom in. Values smaller than100%
zoom out. <number>
-
Zoom factor. Equivalent to the corresponding percentage (
1.0
=100%
=normal
). Values larger than1.0
zoom in. Values smaller than1.0
zoom out.
Formal definition
Initial value | normal |
---|---|
Applies to | all elements |
Inherited | no |
Computed value | as specified |
Animation type | an integer |
Formal syntax
normal | reset | <number> | <percentage>
Examples
First example
HTML
<p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p>
CSS
p.small {
zoom: 75%;
}
p.normal {
zoom: normal;
}
p.big {
zoom: 2.5;
}
p {
display: inline-block;
}
p:hover {
zoom: reset;
}
Result
Second example
HTML
<div id="a" class="circle"></div>
<div id="b" class="circle"></div>
<div id="c" class="circle"></div>
CSS
div.circle {
width: 25px;
height: 25px;
border-radius: 100%;
text-align: center;
vertical-align: middle;
display: inline-block;
zoom: 1.5;
}
div#a {
background-color: gold;
zoom: normal;
}
div#b {
background-color: green;
zoom: 200%;
}
div#c {
background-color: blue;
zoom: 2.9;
}
Result
Specifications
Not part of any standard. This property originated in Internet Explorer. Apple has a description in the Safari CSS Reference. Rossen Atanassov of Microsoft has an unofficial draft specification proposal on GitHub.
Browser compatibility
BCD tables only load in the browser
See also
zoom
entry in CSS-Tricks' CSS Almanac- The
zoom
viewport descriptor used with@viewport
- Bug 390936: Implement Internet Explorer
zoom
property for CSS on the Firefox issue tracker Bugzilla