Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
aspect-ratio
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
Dieaspect-ratioCSS Eigenschaft ermöglicht es Ihnen, das gewünschte Breiten-zu-Höhen-Verhältnis eines Box-Elements zu definieren. Das bedeutet, dass der Browser die Abmessungen des Elements anpasst, um das angegebene Breiten-zu-Höhen-Verhältnis beizubehalten, selbst wenn sich die Größe des übergeordneten Containers oder des Ansichtsfensters ändert. Das angegebeneSeitenverhältnis wird bei der Berechnung von automatischen Größen und einigen anderen Layout-Funktionen verwendet.
Mindestens eine der Box-Größen muss automatisch sein, damitaspect-ratio eine Wirkung hat. Wenn weder die Breite noch die Höhe eine automatische Größe ist, hat das angegebene Seitenverhältnis keinen Einfluss auf die bevorzugten Größen der Box.
Probieren Sie es aus
aspect-ratio: auto;aspect-ratio: 1 / 1;aspect-ratio: 16 / 9;aspect-ratio: 0.5;<section> <img height="640" src="/shared-assets/images/examples/plumeria.jpg" width="466" /></section>#example-element { height: 100%; width: auto;}Syntax
aspect-ratio: 1 / 1;aspect-ratio: 1;/* fallback to 'auto' for replaced elements */aspect-ratio: auto 3/4;aspect-ratio: 9/6 auto;/* Global values */aspect-ratio: inherit;aspect-ratio: initial;aspect-ratio: revert;aspect-ratio: revert-layer;aspect-ratio: unset;Diese Eigenschaft wird als eines oder beides der Schlüsselwörter auto oder ein<ratio> angegeben. Wenn beide angegeben sind und es sich bei dem Element um einersetztes Element handelt, wie zum Beispiel<img>, dann wird das angegebene Verhältnis verwendet, bis der Inhalt geladen ist. Nachdem der Inhalt geladen ist, wird derauto Wert angewendet, sodass das intrinsische Seitenverhältnis des geladenen Inhalts verwendet wird.
Wenn das Element kein ersetztes Element ist, wird das angegebeneratio verwendet.
Werte
autoErsetzte Elemente mit einem intrinsischen Seitenverhältnis verwendendieses Seitenverhältnis, ansonsten hat die Box kein bevorzugtes Seitenverhältnis. Größenberechnungen, die das intrinsische Seitenverhältnis betreffen, arbeiten immer mit den Abmessungen des Inhaltsbereichs.
<ratio>Das bevorzugte Seitenverhältnis der Box ist das angegebene Verhältnis von
width/height. Wennheightund das vorausgehende Schrägstrich-Zeichen weggelassen werden, hatheightden Standardwert1. Größenberechnungen, die das bevorzugte Seitenverhältnis betreffen, arbeiten mit den Abmessungen der Box, die durchbox-sizingangegeben werden.auto && <ratio>Wenn sowohl
autoals auch ein<ratio>zusammen angegeben werden, wirdautoverwendet, wenn das Element ein ersetztes Element mit einem natürlichen Seitenverhältnis ist, wie ein<img>Element. Andernfalls wird das angegebene Verhältnis vonwidth/heightals bevorzugtes Seitenverhältnis verwendet.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | all elements except inline boxes and internal ruby or table boxes |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | by computed value type |
Formale Syntax
aspect-ratio =
auto||
<ratio>
<ratio> =
<number [0,∞]>[ /<number [0,∞]>]?
Beispiele
Erkundung der Auswirkungen von aspect-ratio mit fester Breite
In diesem Beispiel wurde die Breite der<div> Elemente auf100px und die Höhe aufauto gesetzt. Da der Breitenwert hier festgelegt ist, wirkt sich dieaspect-ratio Eigenschaft nur auf die Höhe der<div> Elemente aus, um das angegebene Breiten-zu-Höhen-Verhältnis beizubehalten.
<div>1/1</div><div>0.5</div><div>1</div><div>1/0.5</div><div>16/9</div>div { display: inline-flex; background-color: lime; justify-content: center;}div { width: 100px; height: auto;}div:nth-child(1) { aspect-ratio: 1/1;}div:nth-child(2) { aspect-ratio: 0.5;}div:nth-child(3) { aspect-ratio: 1;}div:nth-child(4) { aspect-ratio: 1/0.5;}div:nth-child(5) { aspect-ratio: 16/9;}Rückfall auf natürliches Seitenverhältnis
In diesem Beispiel verwenden wir zwei<img> Elemente. Beim ersten Element ist dassrc Attribut nicht auf eine Bilddatei gesetzt.
<img src="" /> <img src="plumeria.jpg" />Der folgende Code legt3/2 als bevorzugtes Seitenverhältnis fest undauto als Rückfall.
img { display: inline; width: 200px; border: 2px dashed red; background-color: lime; vertical-align: top; aspect-ratio: 3/2 auto;}Beachten Sie, wie das erste Bild ohne ersetzt Inhalt das3/2 Verhältnis beibehält, während das zweite Bild nach dem Laden des Inhalts das natürliche Seitenverhältnis des Bildes verwendet.
Spezifikationen
| Specification |
|---|
| CSS Box Sizing Module Level 4 # aspect-ratio |