Propriété CSS zoom - Syntaxe, valeurs, exemples

La propriété CSS zoom met à l'échelle un élément et son contenu, en l'agrandissant ou le réduisant selon un facteur donné. Une valeur de 2 double la taille rendue, 0.5 la réduit de moitié, et normal (la valeur par défaut) la laisse inchangée.

Cette page couvre la syntaxe de zoom, toutes les valeurs acceptées, ses différences par rapport à transform: scale(), la compatibilité navigateur, et quand utiliser l'un ou l'autre.

Différences entre `zoom` et `transform: scale()`

Ces deux propriétés semblent interchangeables, mais leur comportement est très différent :

zoom met à l'échelle la mise en page et le rendu visuel. Un élément zoomé occupe sa nouvelle boîte, plus grande, dans le flux du document, ce qui repousse les éléments voisins. Le navigateur recalcule également la mise en page, de sorte que le texte s'adapte nettement à la nouvelle taille.
transform: scale() ne met à l'échelle que le rendu visuel. L'élément conserve sa boîte d'origine pour la mise en page — il grandit visuellement mais chevauche ses voisins au lieu de les repousser, et les pixels mis à l'échelle peuvent paraître légèrement flous.

Utilisez zoom lorsque vous souhaitez que la mise en page environnante réagisse à la nouvelle taille. Utilisez transform: scale() (le choix standardisé et pleinement pris en charge) pour les effets au survol, les animations, et tout ce qui ne doit pas perturber le flux.

Avertissement

zoom est non standard et n'est pas pris en charge par les anciennes versions de Firefox. Pour les sites en production qui doivent fonctionner partout, préférez transform: scale() pour redimensionner un élément.

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

Syntaxe

Valeurs CSS zoom

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

Les formes number et percentage sont celles que vous utiliserez en pratique : zoom: 1.5 et zoom: 150% signifient la même chose.

Exemple de la propriété zoom

L'exemple ci-dessous affiche trois cercles identiques, chacun mis à l'échelle par un facteur différent, pour que vous puissiez comparer normal, un pourcentage et un nombre sans unité côte à côte.

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

Essayez vous-même »

Résultat

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 du flux 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 agrandissent. Les valeurs inférieures à 1.0 réduisent.
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	Force la propriété à utiliser sa valeur par défaut.
inherit	Hérite de la propriété de son élément parent.

Compatibilité navigateur

zoom est né dans Internet Explorer et a ensuite été adopté par Chrome, Edge, Safari et Opera. Firefox a ajouté la prise en charge relativement récemment et l'a ignorée pendant des années ; traitez-le donc comme une amélioration progressive plutôt qu'un outil de mise en page essentiel. Étant non standard, fournissez toujours un recours via transform: scale() pour tout élément critique.

Propriétés associées

transform — la façon standard et pleinement prise en charge de mettre à l'échelle, faire pivoter, incliner et déplacer des éléments.
transition — animer le changement lors d'une mise à l'échelle au survol ou au focus.
width — définir une taille explicite plutôt qu'un facteur d'échelle.
overflow — contrôler ce qui se passe lorsqu'un élément zoomé dépasse son conteneur.

Pratique

Quelle propriété devrait être utilisée à la place de cette propriété, si possible ?

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

Différences entre zoom et transform: scale()