zoom
MDN 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.
body {
display: flex;
align-items: center;
justify-content: space-around;
height: 100vh;
}
.small {
zoom: 75%;
}
.normal {
zoom: normal;
}
.big {
zoom: 2.5;
}
p:hover {
zoom: unset;
}<p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p>Syntax
<number [0,∞]> | <percentage [0,∞]>Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- 1
- Applies to
- all <length> property values of all elements
- Inherited
- no
- Percentages
- Converted to <number>
- Computed value
- as specified, but with <percentage> converted to the equivalent <number>
- Canonical order
- per grammar
- Animation type
- by computed value type
Browser support
| Chrome | 1 |
|---|---|
| Edge | 12 |
| Firefox | 126 |
| Safari | 3.1 |
| Chrome Android | 18 |
| Safari iOS | 3 |
First version with support, from MDN browser-compat-data.