W3docs
es
Iniciar sesión

Propiedad zoom de CSS

CSS zoom Property is used to scale the elements of your website. This property is non-standard and is supported by only some browsers including.

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 inicialnormal
Se aplica aTodos los elementos.
HeredableNo.
AnimableSí.
VersiónNo estándar
Sintaxis DOMobject.style.zoom = "4";

Sintaxis

Valores de zoom en CSS

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

Ejemplo de la propiedad zoom:

Ejemplo de código de zoom en CSS

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

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

ValorDescripción
normalEspecifica el tamaño normal del elemento.
numberFactor 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.
percentageEspecifica un valor en porcentaje. 100% es equivalente a normal.
resetNo amplía el elemento si el usuario aplica un zoom no basado en pellizco al documento.
initialHace que la propiedad use su valor predeterminado.
inheritHereda la propiedad de su elemento padre.

Práctica

Práctica

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