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

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

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 typeNot animatable

Sintaxis formal

zoom = 
  <number [0,∞]>      ||
  <percentage [0,∞]>

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