Propriété CSS zoom

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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.