zoom

Baseline 2024
Newly available

Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

Die CSS-Eigenschaft zoom skaliert das anvisierte Element, was das Seitenlayout beeinflussen kann. Bei der Skalierung vergrößert sich das gezoomte Element von oben und Mitte aus, wenn der Standard-writing-mode verwendet wird.

Im Gegensatz dazu führt ein mit scale() skaliertes Element nicht zu Neuberechnungen des Layouts oder zum Verschieben anderer Elemente auf der Seite. Wenn die Verwendung von scale() dazu führt, dass der Inhalt größer als das umgebende Element wird, tritt overflow in Kraft. Zusätzlich transformieren mit scale() angepasste Elemente standardmäßig von der Mitte aus; dies kann mit der CSS-Eigenschaft transform-origin 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>

Zoomfaktor. 100% entspricht normal. Werte größer als 100% zoomen hinein. Werte kleiner als 100% zoomen hinaus.

<number>

Zoomfaktor. Entspricht dem entsprechenden Prozentsatz (1.0 = 100% = normal). Werte größer als 1.0 zoomen hinein. Werte kleiner als 1.0 zoomen hinaus.

Zwei nicht standardmäßige Schlüsselwortwerte werden nicht empfohlen. Prüfen Sie die Browser-Kompatibilität Daten:

normal

Rendert das Element in seiner normalen Größe; entspricht 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 nicht-pinching-basiertes Zoomen (z. B. durch Drücken der Tastenkombination Strg - - oder Strg + +) auf das Dokument anwendet.

Formale Definition

Anfangswert1
Anwendbar aufalle Elemente
VererbtNein
ProzentwerteConverted to <number>
Berechneter Wertas specified, but with <percentage> converted to the equivalent <number>
AnimationstypNot animatable

Formale Syntax

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

Beispiele

Absätze skalieren

In diesem Beispiel werden die Absatz-Elemente gezoomt, beim Hover über einen Absatz wird der zoom-Wert zurückgesetzt.

HTML

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

CSS

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

Ergebnis

Elemente skalieren

In diesem Beispiel werden die div-Elemente mithilfe der Werte normal, <percentage> und <number> vergrößert.

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

Ein Zoom-Kontrollfeld erstellen

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

HTML

In diesem ersten Block von HTML wird ein select-Feld definiert, mit den verschiedenen zoom-Werten, 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>

In diesem zweiten Block wird eine nicht unterstützte Nachricht hinzugefügt, die verborgen 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

In diesem ersten Block von CSS setzen wir den Ausgangswert für --zoom-level unter Verwendung von benutzerdefinierte Eigenschaften und verwenden dann diesen als Wert für zoom auf dem Inhaltsblock.

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

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

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

JavaScript

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

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

Ergebnis

Spezifikationen

Specification
CSS Viewport Module Level 1
# zoom-property

Browser-Kompatibilität

Siehe auch