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


```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` 
Non-standard

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 inicial | `normal` |
| Applies to | all elements |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | an integer |

Sintaxis formal
---------------

Error: could not find syntax for this itemEjemplos
--------

### 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 with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* Artículo de `zoom` en la página de CSS-Tricks
* Bug 390936: Implementar la propiedad `zoom` de Internet Explorer para CSS en el rastreador de problemas de Firefox Bugzilla.