Propriété CSS zoom

La propriété zoom est utilisée pour mettre à l'échelle le contenu. Pour mettre à l'échelle le contenu, vous pouvez également utiliser la propriété transform définie sur scale().

note
Contrairement à transform: scale(), qui n'affecte que la couche de rendu, zoom met à l'échelle à la fois la mise en page et le rendu. Cela signifie que les éléments avec zoom affecteront le flux du document et les éléments environnants, contrairement à transform.

WARNING

Cette fonctionnalité n'est pas standard et il n'est pas recommandé de l'utiliser sur des sites en production, car elle n'est pas prise en charge par Firefox. Par conséquent, vous pouvez utiliser transform: scale() pour modifier la taille d'un élément du site.

Valeur initiale	normal
S'applique à	Tous les éléments.
Héritée	Non.
Animable	Oui.
Version	Non-standard
Syntaxe DOM	object.style.zoom = "4";

Syntaxe

Valeurs CSS de zoom

css

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

Exemple de la propriété zoom :

Exemple de code CSS zoom

html

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

Try it Yourself »

Résultat

CSS zoom description table

L'image montre trois cercles mis à l'échelle par des facteurs différents : le cercle gris utilise normal (1x), le cercle bleu utilise 300% (3x) et le cercle vert utilise 5 (5x). Remarquez comment les cercles plus grands repoussent la mise en page environnante vers l'extérieur, illustrant le comportement de mise à l'échelle de la mise en page de zoom.

Valeurs

Valeur	Description
normal	Spécifie la taille normale de l'élément.
number	Facteur de zoom. Équivalent au pourcentage correspondant (1,0 = 100 % = normal). Les valeurs supérieures à 1,0 effectuent un zoom avant. Les valeurs inférieures à 1,0 effectuent un zoom arrière.
percentage	Spécifie une valeur en pourcentage. 100 % est équivalent à normal.
reset	Ne pas agrandir l'élément si l'utilisateur applique un zoom non basé sur le pincement au document.
initial	Fait utiliser à la propriété sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Practice

La propriété ___ doit être utilisée à la place de cette propriété, si possible.

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

Propriété CSS zoom ​

Syntaxe ​

Exemple de la propriété zoom : ​

Résultat ​