zoom
Baseline 2024Newly 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
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 betreffende Element, was das Layout der Seite beeinflussen kann.
Beim Skalieren wird das vergrößerte Element bei der Verwendung des Standard-writing-mode
von top
und center
skaliert.
Im Gegensatz dazu führt ein mit scale()
skaliertes Element nicht zu einer Neuberechnung des Layouts oder zur Verschiebung anderer Elemente auf der Seite.
Falls die Verwendung von scale()
den Inhalt größer als das Enthaltende Element macht, greift overflow
.
Zusätzlich werden Elemente, die mit scale()
angepasst werden, standardmäßig vom center
skaliert; dies kann mit der transform-origin
CSS-Eigenschaft geändert werden.
Syntax
/* <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%
entsprichtnormal
. Werte größer als100%
vergrößern. Werte kleiner als100%
verkleinern. <number>
-
Zoom-Faktor. Entsprechend dem entsprechenden Prozentsatz (
1.0
=100%
=normal
). Werte größer als1.0
vergrößern. Werte kleiner als1.0
verkleinern.
Zwei nicht-standardisierte Schlüsselwortwerte werden nicht empfohlen. Überprüfen Sie die Browser-Kompatibilität:
normal
-
Rendert das Element in seiner normalen Größe; entspricht
zoom: 1
. Verwenden Sie stattdessen den globalenunset
Schlüsselwortwert. reset
-
Setzt den Wert zu
zoom: 1
zurück und verhindert, dass das Element (de)vergrößert wird, wenn der Benutzer nicht auf Pinch basierendes Zoomen (z.B. durch Drücken von Ctrl - - oder Ctrl + + Tastaturkürzel) auf das Dokument anwendet.
Formale Definition
Anfangswert | normal |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | Not animatable |
Formale Syntax
zoom =
<number [0,∞]> ||
<percentage [0,∞]>
Beispiele
Umgestaltung von Absätzen
In diesem Beispiel werden die Absatz-Elemente gezoomt. Beim Überfahren eines Absatzes ist der zoom
-Wert unset
.
HTML
<p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p>
CSS
.small {
zoom: 75%;
}
.normal {
zoom: normal;
}
.big {
zoom: 2.5;
}
p:hover {
zoom: unset;
}
Ergebnis
Skalierung von Elementen
In diesem Beispiel werden die div
-Elemente mit den Werten normal
, <percentage>
und <number>
gezoomt.
HTML
<div id="a" class="circle"></div>
<div id="b" class="circle"></div>
<div id="c" class="circle"></div>
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
Erstellung einer Zoom-Steuerung
In diesem Beispiel wird ein select
-Feld verwendet, um das Zoom-Level des Elements zu ändern.
HTML
Im ersten HTML-Block wird ein select
-Feld mit den verschiedenen zu verwendenden zoom
-Werten definiert.
<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 verborgen wird, falls der Browser zoom
unterstützt.
<p class="zoom-notice">CSS zoom is not supported</p>
Der letzte Block definiert einfach den Inhalt, der gezoomt wird.
<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
mithilfe von benutzerdefinierten Eigenschaften und verwenden diesen dann als Wert für zoom
im Inhaltsblock.
html {
--zoom-level: normal;
}
.content {
max-width: 60ch;
margin: auto;
zoom: var(--zoom-level);
}
Im letzten CSS-Block überprüfen wir, ob der Browser zoom
unterstützt, und setzen, falls ja, die nicht unterstützte Nachricht auf display: none;
.
@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 Inhalts-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);
Ergebnis
Spezifikationen
Specification |
---|
CSS Viewport Module Level 1 # zoom-property |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
zoom
-Eintrag im CSS Alamanach von CSS-Trickstransform
scale
unset
Schlüsselwort- Legacy-
zoom
-Eigenschaft über CSS-Tricks (2013)