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.
Die aspect-ratio
CSS Eigenschaft ermöglicht es Ihnen, das gewünschte Breiten-Höhen-Verhältnis eines Elements festzulegen. Dies bedeutet, dass der Browser, selbst wenn sich die Größe des übergeordneten Containers oder Ansichtsfensters ändert, die Abmessungen des Elements anpasst, um das angegebene Breiten-Höhen-Verhältnis beizubehalten. Das angegebene Seitenverhältnis wird bei der Berechnung von automatischen Größen und einigen anderen Layoutfunktionen verwendet.
Mindestens eine der Größen der Box muss automatisch sein, damit aspect-ratio
irgendeine Wirkung hat. Wenn weder die Breite noch die Höhe eine automatische Größe haben, hat das angegebene Seitenverhältnis keinen Einfluss auf die bevorzugten Größen der Box.
Probieren Sie es aus
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 entweder als das Schlüsselwort auto oder als ein <ratio>
angegeben. Wenn beide angegeben werden und das Element ein ersetztes Element ist, wie z.B. <img>
, dann wird das angegebene Verhältnis verwendet, bis der Inhalt geladen ist. Nach dem Laden des Inhalts wird der Wert auto
angewendet, sodass das intrinsische Seitenverhältnis des geladenen Inhalts verwendet wird.
Wenn das Element kein ersetztes Element ist, wird das angegebene ratio
verwendet.
Werte
auto
-
Ersetzte Elemente mit einem intrinsischen Seitenverhältnis verwenden dieses Seitenverhältnis, andernfalls hat die Box kein bevorzugtes Seitenverhältnis. Bei Größenberechnungen, die das intrinsische Seitenverhältnis einbeziehen, wird immer mit den Dimensionen der Content-Box gearbeitet.
<ratio>
-
Das bevorzugte Seitenverhältnis der Box ist das angegebene Verhältnis von
width
/height
. Wennheight
und das vorausgehende Schrägstrichzeichen weggelassen werden, istheight
standardmäßig1
. Größenberechnungen, die das bevorzugte Seitenverhältnis einbeziehen, arbeiten mit den Dimensionen der Box, die durchbox-sizing
angegeben werden. auto && <ratio>
-
Wenn sowohl
auto
als auch ein<ratio>
zusammen angegeben werden, wirdauto
verwendet, wenn das Element ein ersetztes Element mit einem natürlichen Seitenverhältnis ist, wie ein<img>
-Element. Andernfalls wird das angegebene Verhältnis vonwidth
/height
als 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
Untersuchung der Wirkung des aspect-ratio mit fester Breite
In diesem Beispiel wurde die Breite der <div>
-Elemente auf 100px
und die Höhe auf auto
gesetzt. Da hier der Breitenwert festgelegt ist, beeinflusst die Eigenschaft aspect-ratio
nur die Höhe der <div>
-Elemente, um das angegebene Breiten-Höhen-Verhältnis beizubehalten.
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. Das erste Element hat sein src
-Attribut nicht auf eine Bilddatei gesetzt.
<img src="" /> <img src="plumeria.jpg" />
Der folgende Code legt 3/2
als bevorzugtes Seitenverhältnis und auto
als Rückfall fest.
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 ersetzten Inhalt das 3/2
-Seitenverhä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 |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
aspect-ratio | ||||||||||||
auto |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support