zoom
Baseline 2024
Newly available
Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
No estándar: Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.
La propiedad no estándar de CSS zoom
se puede usar para controlar el aumento de escala de un elemento. Si es posible, se debe usar transform: scale()
en lugar de esta propiedad. Sin embargo, a diferencia de los CSS Transforms, zoom
afecta el tamaño del diseño del elemento.
Sintaxis
/* Valores de palabras clave */
zoom: normal;
zoom: reset;
/* <percentage> values */
zoom: 50%;
zoom: 200%;
/* <number> values */
zoom: 1.1;
zoom: 0.7;
/* Valores globales */
zoom: inherit;
zoom: initial;
zoom: revert;
zoom: revert-layer;
zoom: unset;
Valores
normal
-
Dibuja el elemento con su tamaño normal.
reset
Non-standard-
No cambia la escala de este elemento si el usuario aplica zoom no basado en toques al documento (p. ej.: presionando los atajos de teclado Ctrl - - o Ctrl + +). Sólo soportado por
WebKit
(y posiblementeBlink
). <percentage>
-
Factor de Zoom.
100%
es equivalente anormal
. Valores superiores a100%
aumentan y valores inferiores al100%
alejan el elemento. <number>
-
Factor de
zoom
. Equivalente al porcentaje correspondiente (1.0
=100%
=normal
). Valores mayores de1.0
aumentan. Valores menores de1.0
alejan.
Definición formal
Valor inicial | normal |
---|---|
Applies to | all elements |
Heredable | no |
Valor calculado | como se especifica |
Animation type | Not animatable |
Sintaxis formal
zoom =
<number [0,∞]> ||
<percentage [0,∞]>
Ejemplos
Primer ejemplo
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;
}
Resultado
Segundo ejemplo
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;
}
Resultado
Especificaciones
No forma parte de ningún estándar. Esta propiedad tiene su origen en Internet Explorer. Apple tiene una descripción en la Referencia CSS de Safari. Rossen Atanassov de Microsoft posee un borrador de propuesta de especificación no oficial en Github.
Compatibilidad con navegadores
BCD tables only load in the browser
Véase también
- Artículo de
zoom
en la página de CSS-Tricks - Bug 390936: Implementar la propiedad
zoom
de Internet Explorer para CSS en el rastreador de problemas de Firefox Bugzilla.