Propriété CSS zoom

La propriété zoom est utilisée pour l'agrandissement du contenu. La propriété transform a une valeur "scale()"qui peut également être utilisée au lieu de la propriété zoom.

Pour la compatibilité maximal des navigateurs, des extensions telles que -ms- sont utilisées avec cette propriété.
Valeur initiale normal
Appliquée à Tous les éléments.
Héritée Non.
Animable Oui.
Version Safari CSS Reference.
Syntaxe DOM object.style.zoom = "4";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété zoom</h2>
    <div id="grey" class="element"></div>
    <div id="blue" class="element"></div>
    <div id="green" class="element"></div>
  </body>
</html>

Valeurs

Valeur Description
normal Spécifie la taille normale de l'élément.
number Le facteur de zoom. Équivalent au pourcentage correspondant (1.0 = 100% = normal). Les valeurs supérieures à 1.0 agrandissent l'élément. Les valeurs inférieures à 1.0, le réduisent.
percentage Spécifie une valeur en pourcentage. 100% est équivalent au mot-clé normal.
reset Ne pas agrandir l'élément si l'utilisateur applique un zoom non fondé sur le pincement au document.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

4.0+ 12.0+ 4.0+ 15.0+


Trouvez-vous cela utile?

Articles Associées