Attribut zoom CSS

Définition et utilisation

zoom L'attribut spécifie le rapport d'agrandissement de l'élément. L'élément peut être agrandi ou rétréci.

Exemple

Exemple 1

Pour le texte zoom Attribut :

p.a {
  zoom: normal;
}
p.b {
  zoom: 150%;
}
p.c {
  zoom: 0.6;
}

Essayez-le vous-même

Exemple 2

Utilisez zoom Ajustement de la taille de l'élément :

div {
  border-radius: 100%;
  background: #73AD21;
  padding: 20px;
  width: 80px;
  height: 80px;
}
div.a {
  zoom: normal;
}
div.b {
  zoom: 150%;
}
div.c {
  zoom: 0.6;
}

Essayez-le vous-même

Syntaxe CSS

zoom: normal|%|number|unset|initial|inherit;

Valeur de l'attribut

Valeur Description
normal Valeur par défaut. L'élément est rendu de manière normale.
%

Spécifiez le rapport d'agrandissement sous forme de pourcentage.

100% = Normal.

Pour agrandir, utilisez une valeur supérieure à 100%.

Pour réduire, utilisez une valeur inférieure à 100%.
number

Spécifiez le rapport d'agrandissement sous forme numérique (pourcentage).

1.0 = Normal.

Pour agrandir, utilisez une valeur supérieure à 1.0.

Pour réduire, utilisez une valeur inférieure à 1.0.
unset Annuler la définition du rapport d'agrandissement (retour à la taille normale).
initial Réinitialise cette propriété à sa valeur par défaut. Voir initial.
inherit Inherits cette propriété de son élément parent. Voir inherit.

Détails techniques

Valeur par défaut : normal
Héritabilité : Non
Réalisation des animations : Supporté. Voir :Propriétés liées aux animations.
Version : Module CSS Viewport Niveau 1
Syntaxe JavaScript : object.style.zoom = "3"

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
1 12 126 3.1 15.0