Propriedade CSS zoom - Sintaxe, Valores, Exemplos

A propriedade CSS zoom dimensiona um elemento e seu conteúdo, ampliando ou reduzindo-o por um fator determinado. Um valor de 2 dobra o tamanho renderizado, 0.5 o divide pela metade, e normal (o padrão) o deixa sem alteração.

Esta página aborda a sintaxe do zoom, todos os valores aceitos, como ele difere de transform: scale(), o suporte por navegadores e quando usar cada um deles.

Como `zoom` difere de `transform: scale()`

As duas propriedades parecem intercambiáveis, mas se comportam de maneiras muito diferentes:

zoom dimensiona o layout e a pintura. Um elemento com zoom ocupa sua nova caixa maior no fluxo do documento, empurrando os elementos vizinhos para o lado. O navegador também re-executa o layout, de modo que o texto reflui de forma nítida no novo tamanho.
transform: scale() dimensiona apenas a pintura. O elemento mantém sua caixa original para fins de layout — ele cresce visualmente, mas sobrepõe seus vizinhos em vez de empurrá-los, e os pixels redimensionados podem parecer ligeiramente borrados.

Use zoom quando quiser que o layout ao redor responda ao novo tamanho. Use transform: scale() (a opção padronizada e totalmente suportada) para efeitos de hover, animações e qualquer coisa que não deva perturbar o fluxo.

Aviso

zoom é não padronizado e não é suportado em versões mais antigas do Firefox. Para sites em produção que precisam funcionar em todos os lugares, prefira transform: scale() para redimensionar um elemento.

Valor inicial	normal
Aplica-se a	Todos os elementos.
Herdado	Não.
Animável	Sim.
Versão	Não padronizado
Sintaxe DOM	object.style.zoom = "4";

Sintaxe

Valores CSS zoom

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

As formas number e percentage são as que você usará na prática: zoom: 1.5 e zoom: 150% significam a mesma coisa.

Exemplo da propriedade zoom

O exemplo abaixo renderiza três círculos idênticos, cada um dimensionado por um fator diferente, para que você possa comparar normal, uma porcentagem e um número sem unidade lado a lado.

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

Experimente Você Mesmo »

Resultado

A imagem mostra três círculos dimensionados por fatores diferentes: o círculo cinza usa normal (1x), o círculo azul usa 300% (3x) e o círculo verde usa 5 (5x). Observe como os círculos maiores empurram o layout ao redor para fora, demonstrando o comportamento de dimensionamento de layout do zoom.

Valores

Valor	Descrição
normal	Especifica o tamanho normal do elemento.
number	Fator de zoom. Equivalente à porcentagem correspondente (1.0 = 100% = normal). Valores maiores que 1.0 ampliam. Valores menores que 1.0 reduzem.
percentage	Especifica um valor em porcentagem. 100% equivale a normal.
reset	Não amplia o elemento se o usuário aplicar zoom ao documento sem ser por pinça.
initial	Faz a propriedade usar seu valor padrão.
inherit	Herda a propriedade de seu elemento pai.

Suporte de navegadores

zoom teve origem no Internet Explorer e foi adotado posteriormente pelo Chrome, Edge, Safari e Opera. O Firefox adicionou suporte relativamente recente e ignorou-o por anos, portanto, trate-o como um aprimoramento progressivo em vez de uma ferramenta de layout essencial. Por ser não padronizado, sempre forneça um fallback com transform: scale() para qualquer coisa crítica.

Propriedades relacionadas

transform — a forma padrão e totalmente suportada de dimensionar, girar, inclinar e transladar elementos.
transition — anime a mudança ao dimensionar em hover ou foco.
width — defina um tamanho explícito em vez de um fator de escala.
overflow — controle o que acontece quando um elemento com zoom cresce além do seu contêiner.

Prática

Qual propriedade deve ser usada no lugar desta, se possível?

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

Como zoom difere de transform: scale()