CSS/Eigenschaften/zoom

Der Begriff zoom ist mehrdeutig.
Es gibt ein gleichnamiges SVG-Event JavaScript/DOM/Event/zoom.

Browserunterstützung
caniuse.com

Die Eigenschaft zoom skaliert Elemente und ihren Inhalt.

Erlaubte Werte

• normal
• reset verhindert zoom; Besser das standardisierte unset verwenden
• Prozentangabe
• Zahlenangabe (1.0 = 100% = normal)

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

normal

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

ja

Beispiel

.rechts {
	scale: var(--zoom-factor);	
}

.links {
	zoom: var(--zoom-factor);
}
body {
	--zoom-factor: 1;
}

Wie unten im Live-Beispiel gezeigt, werden zwei Bilder mit zoom, bzw. der scale-Eigenschaft vergrößert. Während das skalierte Bild in einem neuen Stapelkontext über dem Text erscheint. wird das gezoomte Bild vergrößert und der Text fließt um das Bild herum.

Beachten Sie: Die CSS-Eigenschaft zoom skaliert das Ziel-Element, was sich auf das Seitenlayout auswirken kann. Bei der Skalierung wird das gezoomte Element von oben und in der Mitte skaliert, wenn der Standard-Schreibmodus verwendet wird.
Im Gegensatz dazu führt ein mit scale() skaliertes Element nicht zu einer Neuberechnung des Layouts oder zum Verschieben anderer Elemente auf der Seite, da ein neuer Stacking Context erstellt wird.

Geschichte
zoom wurde vorwiegend als Browser-Hack verwendet. display: inline-block; wurde im Internet Explorer IE6 und IE7 inline oder gar nicht dargestellt. Durch die Verwendung von zoom: 1; wurde eine interne Eigenschaft hasLayout aktiviert, die das Element dann als Blockelement darstellte.

Siehe auch

• Transform
  • scale

Weblinks

• Spezifikation (CSSWG): 4. The zoom property (CSS Viewport Module Level 1) W3C First Public Working Draft, 5 March 2024
• MDN: zoom
• Details: caniuse.com

Beispiel: zoom vs scale

zoom vs scale ansehen …

.rechts {
	scale: var(--zoom-factor);	
}

.links {
	zoom: var(--zoom-factor);
}
body {
	--zoom-factor: 1;
}