zoom
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
css
/* 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 | an integer |
Sintaxis formal
Ejemplos
Primer ejemplo
HTML
html
<p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p>
CSS
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
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%;
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.