`zoom` CSS property

Baseline 2024

Neu verfügbar

Seit May 2024 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Die zoom CSS Eigenschaft kann verwendet werden, um den Vergrößerungsgrad eines Elements zu steuern. transform: scale() kann als Alternative zu dieser Eigenschaft verwendet werden.

Die zoom CSS-Eigenschaft skaliert das angezielte Element, was das Seitenlayout beeinflussen kann. Beim Skalieren skaliert das gezoomte Element bei Verwendung des Standard-writing-mode von oben und zentriert.

Im Gegensatz dazu verursacht ein mit scale() skaliertes Element keine Neuberechnung des Layouts oder Verschiebung anderer Elemente auf der Seite. Wenn durch die Verwendung von scale() der Inhalt größer wird als das umgebende Element, greift overflow. Zusätzlich werden Elemente, die mit scale() angepasst werden, standardmäßig vom Zentrum aus transformiert; dies kann mit der transform-origin CSS-Eigenschaft geändert werden.

Syntax

css

/* <percentage> values */
zoom: 50%;
zoom: 200%;

/* <number> values */
zoom: 1.1;
zoom: 0.7;

/* Non-standard keyword values */
zoom: normal;
zoom: reset;

/* Global values */
zoom: inherit;
zoom: initial;
zoom: revert;
zoom: revert-layer;
zoom: unset;

Werte

<percentage>: Zoom-Faktor. 100% entspricht normal. Werte größer als 100% zoomen herein. Werte kleiner als 100% zoomen heraus.
<number>: Zoom-Faktor. Entspricht dem entsprechenden Prozentsatz (1.0 = 100% = normal). Werte größer als 1.0 zoomen herein. Werte kleiner als 1.0 zoomen heraus.

Zwei nicht standardisierte Schlüsselwortwerte werden nicht empfohlen. Überprüfen Sie die Browser-Kompatibilität Daten:

normal: Gibt das Element in seiner normalen Größe wieder; gleichbedeutend mit zoom: 1. Verwenden Sie stattdessen den globalen unset Schlüsselwortwert.
reset: Setzt den Wert auf zoom: 1 zurück und verhindert, dass das Element (de)vergrößert wird, wenn der Benutzer ein nicht-berührungsbasiertes Zoomen (z. B. durch Drücken der Tastenkombinationen Strg - - oder Strg + +) auf das Dokument anwendet.

Formale Definition

Anfangswert	`1`
Anwendbar auf	alle Elemente
Vererbt	Nein
Prozentwerte	Converted to `<number>`
Berechneter Wert	as specified, but with `<percentage>` converted to the equivalent `<number>`
Animationstyp	Not animatable

Formale Syntax

zoom = 
  <number [0,∞]>      |
  <percentage [0,∞]>

Beispiele

Vergrößerung von Absätzen

In diesem Beispiel werden die Absatzelemente gezoomt. Beim Überfahren eines Absatzes wird der zoom-Wert unset.

HTML

html

<p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p>

CSS

body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100vh;
}

css

.small {
  zoom: 75%;
}
.normal {
  zoom: normal;
}
.big {
  zoom: 2.5;
}
p:hover {
  zoom: unset;
}

Ergebnis

Vergrößerung von Elementen

In diesem Beispiel werden die div-Elemente mit den Werten normal, <percentage> und <number> gezoomt.

HTML

html

<div id="a" class="circle"></div>
<div id="b" class="circle"></div>
<div id="c" class="circle"></div>

CSS

css

div.circle {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  vertical-align: middle;
  display: inline-block;
}
div#a {
  background-color: gold;
  zoom: normal; /* circle is 25px diameter */
}
div#b {
  background-color: green;
  zoom: 200%; /* circle is 50px diameter */
}
div#c {
  background-color: blue;
  zoom: 2.9; /* circle is 72.5px diameter */
}

Ergebnis

Erstellen einer Zoom-Steuerung

In diesem Beispiel wird ein select-Feld verwendet, um den Zoom-Level des Elements zu ändern.

HTML

Im ersten HTML-Block wird ein select-Feld mit den verschiedenen zoom-Werten definiert, die verwendet werden sollen.

html

<section class="controls">
  <label for="zoom"
    >Zoom level
    <select name="zoom" id="zoom">
      <option value="0.5">Extra Small</option>
      <option value="0.75">Small</option>
      <option value="normal" selected>Normal</option>
      <option value="1.5">Large</option>
      <option value="2">Extra Large</option>
    </select>
  </label>
</section>

Im zweiten Block wird eine nicht unterstützte Nachricht hinzugefügt, die ausgeblendet wird, wenn der Browser zoom unterstützt.

html

<p class="zoom-notice">CSS zoom is not supported</p>

Der letzte Block definiert einfach den Inhalt, der gezoomt wird.

html

<section class="content">
  <h1>This is the heading</h1>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat inventore
    ea eveniet, fugiat in consequatur molestiae nostrum repellendus nam
    provident repellat officiis facilis alias facere obcaecati quos sunt
    voluptas! Iste.
  </p>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat inventore
    ea eveniet, fugiat in consequatur molestiae nostrum repellendus nam
    provident repellat officiis facilis alias facere obcaecati quos sunt
    voluptas! Iste.
  </p>
</section>

CSS

Im ersten CSS-Block setzen wir den Startwert für --zoom-level mit benutzerdefinierte Eigenschaften und verwenden diesen dann als Wert für zoom im Inhaltsblock.

css

html {
  --zoom-level: normal;
}
.content {
  max-width: 60ch;
  margin: auto;
  zoom: var(--zoom-level);
}

.controls,
.zoom-notice {
  display: flex;
  justify-content: space-around;
}
.zoom-notice {
  color: red;
}

Im letzten CSS-Block prüfen wir, ob der Browser zoom unterstützt und setzen die nicht unterstützte Nachricht auf display: none;.

css

@supports (zoom: 1) {
  .zoom-notice {
    display: none;
  }
}

JavaScript

Dieses JavaScript überwacht eine Änderung im Auswahlfeld und setzt den neuen Wert für --zoom-level im Inhalt section, z. B. style="--zoom-level: 1.5;".

const zoomControl = document.querySelector("#zoom");
const content = document.querySelector(".content");
const updateZoom = () => {
  content.style = `--zoom-level: ${zoomControl.value}`;
};
zoomControl.addEventListener("change", updateZoom);