Propiedad zoom de CSS

La propiedad zoom se utiliza para escalar el contenido. Para escalar el contenido, también puedes usar la propiedad transform establecida en scale().

nota
A diferencia de transform: scale(), que solo afecta a la capa de pintura, zoom escala tanto el diseño como la capa de pintura. Esto significa que los elementos con zoom afectarán el flujo del documento y los elementos circundantes, mientras que transform no lo hace.

advertencia
Esta característica no es estándar y no se recomienda su uso en sitios de producción, ya que no es compatible con Firefox. Por lo tanto, puedes usar transform: scale() para cambiar el tamaño de un elemento del sitio.

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 zoom en CSS

css

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

Ejemplo de la propiedad zoom:

Ejemplo de código de zoom en CSS

html

<!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>

Try it Yourself »

Resultado

CSS zoom description table

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). Valores mayores que 1.0 aumentan el zoom. Valores menores que 1.0 reducen el zoom.
percentage	Especifica un valor en porcentaje. 100% es equivalente a normal.
reset	No amplía el elemento si el usuario aplica un zoom no basado en pellizco al documento.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

Se debe usar la propiedad ___ en lugar de esta propiedad, si es posible.

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

Propiedad zoom de CSS ​

Sintaxis ​

Ejemplo de la propiedad zoom: ​

Resultado ​