CSS zoom-Eigenschaft

Die zoom-Eigenschaft wird verwendet, um den Inhalt zu skalieren. Für die Skalierung des Inhalts können Sie auch die transform-Eigenschaft mit dem Wert scale() verwenden.

Hinweis
Im Gegensatz zu transform: scale(), das nur die Zeichenebene betrifft, skaliert zoom sowohl das Layout als auch die Darstellung. Das bedeutet, dass Elemente mit zoom den Dokumentfluss und umgebende Elemente beeinflussen, während transform dies nicht tut.

Warnung
Dieses Feature ist nicht standardisiert und wird nicht für den Einsatz auf Produktivseiten empfohlen, da es von Firefox nicht unterstützt wird. Daher können Sie transform: scale() verwenden, um die Größe eines Seitenelements zu ändern.

Anfangswert	normal
Anwendbar auf	Alle Elemente.
Vererbbar	Nein.
Animierbar	Ja.
Version	Nicht standardisiert
DOM-Syntax	object.style.zoom = "4";

Syntax

CSS zoom-Werte

css

zoom: normal | number | percentage | reset | initial | inherit;

Beispiel für die zoom-Eigenschaft:

CSS zoom-Codebeispiel

html

<!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>

Try it Yourself »

Ergebnis

CSS zoom description table

Das Bild zeigt drei Kreise, die um verschiedene 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, was das Layout-Skalierungsverhalten von zoom verdeutlicht.

Werte

Wert	Beschreibung
normal	Gibt die normale Größe des Elements an.
number	Zoomfaktor. Entspricht dem entsprechenden Prozentsatz (1,0 = 100 % = normal). Werte größer als 1,0 vergrößern. Werte kleiner als 1,0 verkleinern.
percentage	Gibt einen Wert in Prozent an. 100 % entspricht normal.
reset	Vergrößert das Element nicht, wenn der Benutzer eine Zoomfunktion ohne Pinch-Geste auf das Dokument anwendet.
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft vom Elternelement.

Praxis

Anstelle dieser Eigenschaft sollte, wenn möglich, die ___-Eigenschaft verwendet werden.

transform: rotate()transform: translate()transform: scale()transform: skew()

CSS zoom-Eigenschaft ​

Syntax ​

Beispiel für die zoom-Eigenschaft: ​

Ergebnis ​