Eigenschaft aspect-ratio

Die Eigenschaft aspect-ratio legt die Ausrichtung von Elementen entlang der Kreuzachse für Flexbox-Container und entlang der horizontalen Achse für Grid-Container fest. Wird auf das übergeordnete Element angewendet.

Syntax

Selektor {
	aspect-ratio: auto oder Verhältnis;
}

Werte

Wert	Beschreibung
`auto`	Das Element hat kein bevorzugtes Seitenverhältnis und der Browser legt es automatisch fest, basierend auf der Breite und Höhe des Elements.
`Verhältnis`	Das Verhältnis wird als `16/9` angegeben, hier ist die erste Zahl die Breite und die zweite Zahl die Höhe. Wenn ein Wert nicht angegeben ist, wird er als `1` angenommen. Einige Verhältnisse können auch als einzelne Zahl angegeben werden. Zum Beispiel kann `2/1` als `0.5` geschrieben werden, was das gleiche Ergebnis liefert.
`auto && Verhältnis`	Wenn das Seitenverhältnis zusammen mit dem Schlüsselwort `auto` verwendet wird (Beispiel: `auto` `1/2`), wird das angegebene Verhältnis gewählt, aber für ersetzte Elemente (wie Bilder und Videos) mit eigenem Seitenverhältnis wird nur dieses verwendet.

Beispiel

Lassen Sie uns das automatische Seitenverhältnis für einen Button festlegen:

<p>
	<button>Click</button>
</p>

button {
	aspect-ratio: auto;
	background-color: #9DDFA4;
	padding: 1em;
}

Beispiel

Lassen Sie uns nun das Seitenverhältnis für den Button als 1/2 festlegen:

<p>
	<button>Click</button>
</p>

button {
	aspect-ratio: 1/2;
	background-color: #9DDFA4;
	padding: 1em;
}

Siehe auch

die Eigenschaft object-fit,
die Elemente skaliert