Propiedad CSS zoom - Sintaxis, Valores y Ejemplos

La propiedad CSS zoom escala un elemento y su contenido, ampliándolo o reduciéndolo según un factor determinado. Un valor de 2 duplica el tamaño renderizado, 0.5 lo reduce a la mitad, y normal (el valor por defecto) lo deja sin cambios.

Esta página cubre la sintaxis de zoom, todos los valores aceptados, cómo se diferencia de transform: scale(), la compatibilidad con navegadores y cuándo usar cada uno.

Cómo difiere `zoom` de `transform: scale()`

Las dos propiedades parecen intercambiables, pero se comportan de manera muy diferente:

zoom escala el diseño y la pintura. Un elemento con zoom ocupa su nuevo cuadro más grande en el flujo del documento, por lo que desplaza los elementos vecinos. El navegador también vuelve a ejecutar el diseño, por lo que el texto se redistribuye con nitidez al nuevo tamaño.
transform: scale() escala solo la pintura. El elemento mantiene su cuadro original para fines de diseño: crece visualmente pero se superpone a sus vecinos en lugar de desplazarlos, y los píxeles escalados pueden verse ligeramente borrosos.

Usa zoom cuando quieras que el diseño circundante responda al nuevo tamaño. Usa transform: scale() (la opción estandarizada y totalmente compatible) para efectos hover, animaciones y cualquier cosa que no deba alterar el flujo.

Advertencia

zoom es no estándar y no es compatible con versiones antiguas de Firefox. Para sitios de producción que deben funcionar en todos los navegadores, prefiere transform: scale() para cambiar el tamaño de un elemento.

Valor inicial	normal
Se aplica a	Todos los elementos.
Heredable	No.
Animable	Sí.
Versión	No estándar
Sintaxis DOM	object.style.zoom = "4";

Sintaxis

Valores de CSS zoom

zoom: normal | number | percentage | reset | initial | inherit;

Las formas number y percentage son las que usarás en la práctica: zoom: 1.5 y zoom: 150% significan lo mismo.

Ejemplo de la propiedad zoom

El siguiente ejemplo renderiza tres círculos idénticos, cada uno escalado por un factor diferente, para que puedas comparar normal, un porcentaje y un número sin unidad uno junto al otro.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.element {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        text-align: center;
        vertical-align: middle;
        display: inline-block;
        zoom: 2;
      }
      div#grey {
        background-color: #666;
        zoom: normal;
      }
      div#blue {
        background-color: #1c87c9;
        zoom: 300%;
      }
      div#green {
        background-color: #8ebf42;
        zoom: 5;
      }
    </style>
  </head>
  <body>
    <h2>Zoom property example</h2>
    <div id="grey" class="element"></div>
    <div id="blue" class="element"></div>
    <div id="green" class="element"></div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

La imagen muestra tres círculos escalados por diferentes factores: el círculo gris usa normal (1x), el círculo azul usa 300% (3x) y el círculo verde usa 5 (5x). Observa cómo los círculos más grandes empujan el diseño circundante hacia afuera, demostrando el comportamiento de escalado de diseño de zoom.

Valores

Valor	Descripción
normal	Especifica el tamaño normal del elemento.
number	Factor de zoom. Equivalente al porcentaje correspondiente (1.0 = 100% = normal). Los valores mayores que 1.0 hacen zoom hacia adentro. Los valores menores que 1.0 hacen zoom hacia afuera.
percentage	Especifica un valor en porcentaje. 100% es equivalente a normal.
reset	No ampliar el elemento si el usuario aplica zoom no basado en pellizco al documento.
initial	Hace que la propiedad use su valor por defecto.
inherit	Hereda la propiedad de su elemento padre.

Compatibilidad con navegadores

zoom se originó en Internet Explorer y fue adoptado posteriormente por Chrome, Edge, Safari y Opera. Firefox añadió compatibilidad relativamente tarde y lo ignoró durante años, por lo que debes tratarlo como una mejora progresiva en lugar de una herramienta de diseño fundamental. Como no es estándar, proporciona siempre un fallback con transform: scale() para cualquier elemento crítico.

Propiedades relacionadas

transform — la forma estándar y totalmente compatible de escalar, rotar, sesgar y trasladar elementos.
transition — anima el cambio cuando escalas al pasar el cursor o al recibir el foco.
width — establece un tamaño explícito en lugar de un factor de escala.
overflow — controla qué ocurre cuando un elemento con zoom crece más allá de su contenedor.

Práctica

Si es posible, se debería usar la propiedad ___ en lugar de esta propiedad.

transform: rotate()transform: translate()transform: scale()transform: skew()

Cómo difiere zoom de transform: scale()