aspect-ratio CSS property

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;

Werte

Diese Eigenschaft wird als eines oder beide der Schlüsselwörter auto oder ein <ratio> angegeben.

auto

Ersetzte Elemente mit einem intrinsischem Seitenverhältnis nutzen dieses Seitenverhältnis, andernfalls hat die Box kein bevorzugtes Seitenverhältnis. Größenberechnungen, die ein intrinsisches Seitenverhältnis beinhalten, arbeiten immer mit den Abmessungen des Inhaltsbereichs.

<ratio>

Das bevorzugte Seitenverhältnis der Box ist das angegebene Verhältnis von width / height. Wenn height und das vorhergehende Trennzeichen weggelassen werden, ist die Standardeinstellung von height 1. Größenberechnungen unter Einbeziehung des bevorzugten Seitenverhältnisses arbeiten mit den durch box-sizing festgelegten Abmessungen der Box.

auto && <ratio>

Wenn auto und ein <ratio> zusammen angegeben werden, wird auto verwendet, wenn das Element ein ersetztes Element mit einem natürlichen Seitenverhältnis ist, wie ein <img> Element. Andernfalls wird das angegebene Verhältnis von width / height als bevorzugtes Seitenverhältnis verwendet.

Beschreibung

Die aspect-ratio Eigenschaft definiert ein gewünschtes Breiten-Höhen-Verhältnis einer Elementbox. Das bedeutet, dass selbst wenn sich die Größe des Elterncontainers oder Viewports ändert, der Browser die Abmessungen des Elements so anpasst, dass das angegebene Breite-Höhe-Verhältnis beibehalten wird. Das angegebene Seitenverhältnis wird bei der Berechnung von automatischen Größen und einigen anderen Layout-Funktionen verwendet.

Mindestens eine der Box-Größen muss automatisch sein, damit aspect-ratio eine Auswirkung hat. Wenn weder die Breite noch die Höhe eine automatische Größe ist, hat das angegebene Seitenverhältnis keinen Effekt auf die bevorzugten Größen der Box.

Diese Eigenschaft wird als eines oder beide der Schlüsselwörter auto oder ein <ratio> angegeben. Wenn beides angegeben ist und das Element ein ersetztes Element ist, wie zum Beispiel <img>, dann wird das angegebene Verhältnis verwendet, bis der Inhalt geladen ist. Nach dem Laden des Inhalts wird der auto-Wert angewendet, sodass das intrinsische Seitenverhältnis des geladenen Inhalts verwendet wird.

Wenn das Element kein ersetztes Element ist, wird das angegebene ratio verwendet.

Formale Definition

Formale Syntax

aspect-ratio = 
  auto     ||
  <ratio>  

<ratio> = 
  <number [0,∞]> [ / <number [0,∞]> ]?  

Beispiele

Untersuchung der Auswirkungen von aspect-ratio mit fester Breite

In diesem Beispiel wurde die Breite der <div> Elemente auf 100px festgelegt und die Höhe auf auto. Da hier der Breitenwert festgelegt ist, beeinflusst die aspect-ratio Eigenschaft nur die Höhe der <div> Elemente, um das angegebene Breiten-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 das natürliche 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ü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 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

Browser-Kompatibilität

Siehe auch

• Verständnis von Seitenverhältnissen
• Bildseitenverhältnis: Ruckeln verhindern
• Entwicklung einer Seitenverhältnis-Einheit für CSS
• Höhe und Breite bei Bildern neu festzulegen ist wieder wichtig