CSS zoom-Eigenschaft
Die CSS zoom-Eigenschaft skaliert Elemente einer Website. Sie ist nicht standardisiert und wird nur von einigen Browsern unterstützt.
Die CSS-Eigenschaft zoom skaliert ein Element und seinen Inhalt, indem sie es um einen bestimmten Faktor vergrößert oder verkleinert. Der Wert 2 verdoppelt die gerenderte Größe, 0.5 halbiert sie, und normal (der Standardwert) lässt sie unverändert.
Diese Seite behandelt die zoom-Syntax, alle akzeptierten Werte, den Unterschied zu transform: scale(), die Browser-Unterstützung sowie Empfehlungen, wann welche Methode eingesetzt werden sollte.
Unterschied zwischen zoom und transform: scale()
Beide Eigenschaften wirken auf den ersten Blick austauschbar, verhalten sich jedoch grundlegend verschieden:
zoomskaliert Layout und Darstellung. Ein gezoomtes Element nimmt seinen neuen, größeren Bereich im Dokumentfluss ein und schiebt benachbarte Elemente beiseite. Der Browser führt auch das Layout neu aus, sodass Text in der neuen Größe sauber umgebrochen wird.transform: scale()skaliert nur die Darstellung. Das Element behält für Layout-Zwecke seine ursprüngliche Box – es wächst visuell, überlapppt aber seine Nachbarn, anstatt sie zu verschieben, und die skalierten Pixel können leicht unscharf wirken.
Verwenden Sie zoom, wenn das umgebende Layout auf die neue Größe reagieren soll. Verwenden Sie transform: scale() (die standardisierte, vollständig unterstützte Wahl) für Hover-Effekte, Animationen und alles, was den Fluss nicht stören darf.
zoom ist nicht standardisiert und wird in älteren Firefox-Versionen nicht unterstützt. Für Produktionsseiten, die überall funktionieren müssen, bevorzugen Sie transform: scale() zur Größenänderung eines Elements.
| Anfangswert | normal |
|---|---|
| Gilt für | Alle Elemente. |
| Vererbbar | Nein. |
| Animierbar | Ja. |
| Version | Nicht standardisiert |
| DOM-Syntax | object.style.zoom = "4"; |
Syntax
CSS zoom-Werte
zoom: normal | number | percentage | reset | initial | inherit;Die Formen number und percentage sind die, die Sie in der Praxis verwenden werden: zoom: 1.5 und zoom: 150% bedeuten dasselbe.
Beispiel der zoom-Eigenschaft
Das folgende Beispiel rendert drei identische Kreise, jeweils mit einem anderen Skalierungsfaktor, sodass Sie normal, einen Prozentwert und eine einheitenlose Zahl nebeneinander vergleichen können.
<!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>Ergebnis
Das Bild zeigt drei Kreise, die mit unterschiedlichen Faktoren skaliert wurden: Der graue Kreis verwendet normal (1x), der blaue Kreis 300% (3x) und der grüne Kreis 5 (5x). Beachten Sie, wie die größeren Kreise das umgebende Layout nach außen verschieben – das veranschaulicht das Layout-Skalierungsverhalten von zoom.
Werte
| Wert | Beschreibung |
|---|---|
| normal | Legt die normale Größe des Elements fest. |
| number | Zoom-Faktor. Entspricht dem jeweiligen Prozentwert (1.0 = 100% = normal). Werte größer als 1.0 zoomen herein. Werte kleiner als 1.0 zoomen heraus. |
| percentage | Gibt einen Wert in Prozent an. 100% entspricht normal. |
| reset | Das Element wird nicht vergrößert, wenn der Benutzer eine nicht auf Pinch basierende Zoomaktion auf das Dokument anwendet. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Browser-Unterstützung
zoom hat seinen Ursprung im Internet Explorer und wurde später von Chrome, Edge, Safari und Opera übernommen. Firefox hat die Unterstützung erst relativ spät hinzugefügt und ignorierte sie jahrelang – behandeln Sie sie daher als progressive Verbesserung und nicht als tragendes Layout-Werkzeug. Da sie nicht standardisiert ist, sollten Sie für alles Kritische immer einen transform: scale()-Fallback bereitstellen.
Verwandte Eigenschaften
transform— die standardisierte, vollständig unterstützte Methode zum Skalieren, Drehen, Verzerren und Verschieben von Elementen.transition— animiert die Änderung beim Skalieren bei Hover oder Fokus.width— legt eine explizite Größe statt eines Skalierungsfaktors fest.overflow— steuert, was passiert, wenn ein gezoomtes Element über seinen Container hinauswächst.