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-zu-Höhen-Verhältnis eines Elements zu definieren. Das bedeutet, dass selbst wenn sich die Größe des übergeordneten Containers oder des Ansichtsfensters ändert, der Browser die Dimensionen des Elements anpasst, um das angegebene Breiten-zu-Höhen-Verhältnis beizubehalten. Das angegebene Seitenverhältnis wird bei der Berechnung von automatischen Größen und einigen anderen Layout-Funktionen verwendet.
Mindestens eine der Größen des Kastens muss automatisch sein, damit aspect-ratio
eine Wirkung hat. Wenn weder die Breite noch die Höhe eine automatische Größe ist, hat das angegebene Seitenverhältnis keine Auswirkung auf die bevorzugten Größen des Kastens.
Probieren Sie es aus
aspect-ratio: auto;
aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
aspect-ratio: 0.5;
<section id="default-example">
<img
class="transition-all"
height="640"
id="example-element"
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 beide der Schlüsselwörter auto oder als ein <ratio>
angegeben. Wenn beide gegeben sind und das Element ein ersetztes Element ist, wie beispielsweise ein <img>
, dann wird das angegebene Verhältnis verwendet, bis der Inhalt geladen ist. Nach dem Laden des Inhalts wird der auto
Wert angewendet, wodurch das intrinsische Seitenverhältnis des geladenen Inhalts verwendet wird.
Wenn das Element kein ersetztes Element ist, wird das angegebene Verhältnis
verwendet.
Werte
auto
-
Ersetzte Elemente mit einem intrinsischen Seitenverhältnis verwenden dieses Seitenverhältnis, andernfalls hat der Kasten kein bevorzugtes Seitenverhältnis. Größerechnungen, die ein intrinsisches Seitenverhältnis beinhalten, arbeiten immer mit den Dimensionen des Inhaltskastens.
<ratio>
-
Das bevorzugte Seitenverhältnis des Kastens ist das angegebene Verhältnis von
width
/height
. Wennheight
und das vorangehende Schrägstrich-Zeichen ausgelassen werden, setztheight
den Standardwert auf1
. Größerechnungen, die ein bevorzugtes Seitenverhältnis beinhalten, arbeiten mit den durchbox-sizing
spezifizierten Dimensionen des Kastens. auto && <ratio>
-
Wenn sowohl
auto
als auch ein<ratio>
zusammen angegeben sind, 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
Erkundung der Auswirkungen des Seitenverhältnisses bei fester Breite
In diesem Beispiel ist die Breite der <div>
-Elemente auf 100px
und die Höhe auf auto
gesetzt. Da der Breitenwert hier festgelegt ist, wirkt sich die Eigenschaft aspect-ratio
nur auf die Höhe der <div>
-Elemente aus, um das angegebene Breiten-zu-Höhen-Verhältnis zu beibehalten.
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ückgriff 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 setzt 3/2
als bevorzugtes Seitenverhältnis und auto
als Rückgriff.
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 |