CSS zoom eigenschap

Definitie en gebruik

zoom Eigenschap specificeren van elementen schaalverhouding. Elementen kunnen vergroot of verkleind worden.

Voorbeeld

Voorbeeld 1

Gebruik voor tekst zoom Eigenschap:

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

Probeer het zelf uit

Voorbeeld 2

Gebruik zoom Eigenschap aanpassen van elementen grootte:

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;
}

Probeer het zelf uit

CSS syntaxis

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

Eigenschapswaarde

Waarde Beschrijving
normal Standaardwaarde. Het element wordt normaal weergegeven.
%

De schaalverhouding specificeren in percentage.

100% = normaal.

Om te vergroten, gebruik een waarde groter dan 100%.

Om te verkleinen, gebruik een waarde kleiner dan 100%.
number

De schaalverhouding specificeren in numerieke vorm (percentage).

1.0 = normaal.

Om te vergroten, gebruik een waarde groter dan 1.0.

Om te verkleinen, gebruik een waarde kleiner dan 1.0.
unset De schaalverhouding opheffen (terug naar normaal).
initial Deze eigenschap instellen op de standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap overnemen van de ouderweergave. Raadpleeg inherit.

Technische details

Standaardwaarde: normal
Inherits: Nee
Animatie maken: Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS Viewport Module Level 1
JavaScript syntaxis: object.style.zoom = "3"

Browserondersteuning

Tafelgetallen vertegenwoordigen de browserversie die de eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Opera
1 12 126 3.1 15.0