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

/* 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

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 posiblemente Blink).

<percentage>

Factor de Zoom. 100% es equivalente a normal. Valores superiores a 100% aumentan y valores inferiores al 100% alejan el elemento.

<number>

Factor de zoom. Equivalente al porcentaje correspondiente (1.0 = 100% = normal). Valores mayores de 1.0 aumentan. Valores menores de 1.0 alejan.

Definición formal

Valor inicialnormal
Applies toall elements
Heredableno
Valor calculadocomo se especifica
Animation typean integer

Sintaxis formal

Error: could not find syntax for this item

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