CSS-aspect-ratio-Eigenschaft

Definition und Verwendung

aspect-ratio Diese Eigenschaft ermöglicht es Ihnen, das Verhältnis von Breite und Höhe des Elements zu definieren.

Wenn aspect-ratio und width Diese Eigenschaft, die Höhe wird entsprechend dem definierten Breitenverhältnis angepasst.

Um diese Eigenschaft besser zu verstehen aspect-ratio Diese Eigenschaft. Sehen Sie sich die Demo an.

Tipp:In einem responsiven Layout verwenden aspect-ratio Diese Eigenschaft wird verwendet, wenn das Element oft in der Größe geändert wird und Sie das Verhältnis von Breite und Höhe beibehalten möchten.

Beispiel

Beispiel 1

Fügen Sie dem Element ein Breitenverhältnis hinzu:

div {
  aspect-ratio: 3 / 2;
}

Probieren Sie es selbst aus

Beispiel 2

Wenn die Größe des div-Elements geändert werden muss,aspect-ratio Diese Eigenschaft ist besonders geeignet, um das Verhältnis von Breite und Höhe von div-Elementen zu steuern. Zum Beispiel möchten Sie in einer Bildergalerie die Größe der div-Elemente flexibel gestalten, um alle Geräte zu unterstützen, aber gleichzeitig das Breitenausmaß der Bilder beibehalten:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>Gasse</div>
  <div>Bäume am Straßenrand</div>
  <div>Berge</div>
  <div>Cinque Terre</div>
</div>

Probieren Sie es selbst aus

CSS-Syntax

aspect-ratio: number/number|initial|inherit;

Eigenschaftswert

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle geben die Versionsnummer des ersten Browsers an, der diese Eigenschaft vollständig unterstützt.

Verwandte Seiten

Tutorium:CSS Grid-Layout-Modul

Referenz:CSS Object-fit Eigenschaft

Referenz:CSS Object-position Eigenschaft