Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.

View in EnglishAlways switch to English

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.

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

Die CSS-Eigenschaftzoom skaliert das angezielte Element, was das Seitenlayout beeinflussen kann.Beim Skalieren skaliert das herangezoomte Element vonoben undzentral, wenn der Standard-writing-mode verwendet wird.

Im Gegensatz dazu führt das Skalieren eines Elements mitscale() nicht zu einer Neuberechnung des Layouts oder zur Verschiebung anderer Elemente auf der Seite.Wenn durch die Verwendung vonscale() die Inhalte größer werden als das umgebende Element, dann greiftoverflow.Zusätzlich werden mitscale() angepasste Elemente standardmäßig vomZentrum aus transformiert; dies kann mit der CSS-Eigenschafttransform-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% entsprichtnormal. Werte größer als100% vergrößern. Werte kleiner als100% verkleinern.
<number>: Zoomfaktor. Entspricht dem entsprechenden Prozentsatz (1.0 =100% =normal). Werte größer als1.0 vergrößern. Werte kleiner als1.0 verkleinern.

Zwei nicht standardisierte Schlüsselwort-Werte werden nicht empfohlen. Überprüfen Sie dieBrowser-Kompatibilität Daten:

normal: Rendern Sie das Element in seiner normalen Größe; entsprichtzoom: 1. Verwenden Sie stattdessen den globalenunset Schlüsselwortwert.
reset: Setzt den Wert aufzoom: 1 zurück und verhindert, dass das Element (ver)größert wird, wenn der Benutzer nicht pinch-basierte Vergrößerung (z.B. durch Drücken der TastenkombinationenCtrl -- oderCtrl ++) 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ößern von Absätzen

In diesem Beispiel werden die Absatz-Elemente gezoomt, beim Überfahren eines Absatzes wird derzoom-Wert aufunset gesetzt.

HTML

html

<p>Small</p><p>Normal</p><p>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ößern von Elementen

In diesem Beispiel werden diediv Elemente mit den Wertennormal,<percentage> und<number> gezoomt.

HTML

html

<div></div><div></div><div></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 einselect-Feld verwendet, um den Zoom-Level des Elements zu ändern.

HTML

Im ersten HTML-Block wird einselect-Feld mit den verschiedenen zu verwendendenzoom-Werten definiert.

html

<section>  <label for="zoom"    >Zoom level    <select name="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 einenicht unterstützte Nachricht hinzugefügt, die verborgen wird, wenn der Browserzoom unterstützt.

html

<p>CSS zoom is not supported</p>

Der letzte Block definiert einfach den zu vergrößernden Inhalt.

html

<section>  <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 legen wir den Startwert für den--zoom-level mitbenutzerdefinierten Eigenschaften fest und verwenden diesen dann als Wert fürzoom 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 überprüfen wir, ob der Browserzoom unterstützt, und setzen, falls ja, dienicht unterstützte Nachricht aufdisplay: none;.

css

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

JavaScript

Dieses JavaScript überwacht Änderungen im Auswahlfeld und setzt den neuen Wert für--zoom-level im Inhaltsabschnitt, 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);