zoom

Baseline 2024

Nouvellement disponible

Depuis May 2024, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

La propriété CSS zoom peut être utilisée pour contrôler le niveau de zoom d'un élément. transform: scale() peut être utilisée comme alternative à cette propriété.

La propriété CSS zoom met à l'échelle l'élément ciblé, ce qui peut affecter la mise en page. Lors de la mise à l'échelle, l'élément zoomé est mis à l'échelle à partir du haut et du centre lorsqu'on utilise le writing-mode par défaut.

En revanche, un élément mis à l'échelle à l'aide de scale() ne provoque pas de recalcul de la mise en page ni ne déplace les autres éléments de la page. Si l'utilisation de scale() rend le contenu plus grand que l'élément contenant, alors overflow entre en jeu. De plus, les éléments ajustés à l'aide de scale() sont transformés à partir du centre par défaut ; cela peut être modifié avec la propriété CSS transform-origin.

Syntaxe

css

/* Valeurs de type <percentage> */
zoom: 50%;
zoom: 200%;

/* Valeurs de type <number> */
zoom: 1.1;
zoom: 0.7;

/* Valeurs non standard */
zoom: normal;
zoom: reset;

/* Valeurs globales */
zoom: inherit;
zoom: initial;
zoom: revert;
zoom: revert-layer;
zoom: unset;

Valeurs

<percentage>: Facteur de zoom. 100% est équivalent à normal. Les valeurs supérieures à 100% agrandissent l'élément et les valeurs inférieures le réduisent.
<number>: Facteur de zoom. Équivalent au pourcentage correspondant (1.0 = 100% = normal). Les valeurs supérieures à 1.0 agrandissent l'élément et les valeurs inférieures le réduisent.

Deux valeurs de mot-clé non standard ne sont pas recommandées. Consultez les données de compatibilité des navigateurs :

normal Non standard: Rendre l'élément à sa taille normale ; équivalent à zoom: 1. Utilisez plutôt la valeur globale unset.
reset Obsolète Non standard: Réinitialise la valeur à zoom: 1 et empêche l'élément d'être (dé)zoomé si l'utilisateur·ice applique un zoom non basé sur le pincement (par exemple, en appuyant sur Ctrl - - ou Ctrl + + sur le clavier) au document.

Définition formelle

Valeur initiale	`1`
Applicabilité	tous les éléments
Héritée	non
Pourcentages	Converti en nombre (`<number>`)
Valeur calculée	comme défini, mais avec les pourcentages (`<percentage>`) convertis en nombres (`<number>`) équivalents
Type d'animation	Non animable

Syntaxe formelle

zoom = 
  <number [0,∞]>      |
  <percentage [0,∞]>

Exemples

Redimensionner des paragraphes

Dans cet exemple, les éléments de paragraphe sont zoomés. Lorsque vous survolez un paragraphe, la valeur de zoom est unset.

HTML

html

<p class="petit">Petit</p>
<p class="normal">Normal</p>
<p class="gros">Gros</p>

CSS

body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100vh;
}

css

.petit {
  zoom: 75%;
}
.normal {
  zoom: normal;
}
.gros {
  zoom: 2.5;
}
p:hover {
  zoom: unset;
}

Résultat

Créer un contrôle de zoom

Dans cet exemple, un champ select est utilisé pour changer le niveau de zoom de l'élément.

HTML

Dans ce premier bloc HTML, un champ select est défini avec les différentes valeurs de zoom à utiliser.

html

<section class="controles">
  <label for="zoom"
    >Niveau de zoom
    <select name="zoom" id="zoom">
      <option value="0.5">Très petit</option>
      <option value="0.75">Petit</option>
      <option value="normal" selected>Normal</option>
      <option value="1.5">Grand</option>
      <option value="2">Très grand</option>
    </select>
  </label>
</section>

Dans ce deuxième bloc, un message non pris en charge est ajouté et sera masqué si le navigateur prend en charge zoom.

html

<p class="zoom-notice">Le zoom CSS n'est pas pris en charge</p>

Le dernier bloc définit simplement le contenu qui sera zoomé.

html

<section class="contenu">
  <h1>Ceci est le titre</h1>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat inventore
    ea eveniet, fugiat in consequatur molestiae nostrum repellendus nam
    provident repellat officiis facilis alias facere obcaecati quos sunt
    voluptas! Iste.
  </p>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat inventore
    ea eveniet, fugiat in consequatur molestiae nostrum repellendus nam
    provident repellat officiis facilis alias facere obcaecati quos sunt
    voluptas! Iste.
  </p>
</section>

CSS

Dans ce premier bloc de CSS, nous définissons la valeur de départ pour --zoom-level en utilisant des propriétés personnalisées puis nous utilisons cette valeur pour zoom sur le bloc de contenu.

css

html {
  --niveau-zoom: normal;
}
.contenu {
  max-width: 60ch;
  margin: auto;
  zoom: var(--niveau-zoom);
}

.controles,
.zoom-notice {
  display: flex;
  justify-content: space-around;
}
.zoom-notice {
  color: red;
}

In this final CSS block we are checking to see if the browser supports zoom and if so setting the not supported message to display: none;.

css

@supports (zoom: 1) {
  .zoom-notice {
    display: none;
  }
}

JavaScript

Ce JavaScript surveille les changements dans le champ select et définit la nouvelle valeur pour --niveau-zoom sur la section de contenu, par exemple, style="--niveau-zoom: 1.5;".

const controleZoom = document.querySelector("#zoom");
const contenu = document.querySelector(".contenu");
const updateZoom = () => {
  contenu.style = `--niveau-zoom: ${controleZoom.value}`;
};
controleZoom.addEventListener("change", updateZoom);

Résultat

Spécifications

Spécification
CSS Viewport Module Level 1 # zoom-property

Compatibilité des navigateurs

Voir aussi

L'entrée zoom dans le CSS Almanac de CSS-Tricks ^(angl.)
La propriété transform
La propriété scale
Le mot-clé unset
La propriété zoom héritée ^(angl.) sur CSS-Tricks (2013)

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 6 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu