Seitenverhältnis | CSS-Tricks

CSS Almanac → Eigenschaften → A → aspect-ratio

Geoff Graham am 7. Sep. 2022

Die CSS-Eigenschaft aspect-ratio ermöglicht es Ihnen, Boxen zu erstellen, die proportionale Abmessungen beibehalten, bei denen height und width einer Box automatisch als Verhältnis berechnet werden. Es ist ein wenig mathematisch, aber die Idee ist, dass Sie diesen Wert auf dieser Eigenschaft durch einen anderen Wert dividieren können und der berechnete Wert sicherstellt, dass eine Box in diesem Verhältnis bleibt.

Mit anderen Worten, diese Eigenschaft hilft uns, Elemente konsistent zu dimensionieren, sodass das Verhältnis eines Elements beim Wachsen oder Schrumpfen gleich bleibt.

.element {
  aspect-ratio: 2 / 1; /* ↔️ is double the ↕️ */
}

.element {
  aspect-ratio: 1 / 1; /* ⏹ a perfect square */
}

aspect-ratio ist in der CSS Box Sizing Module Level 4 specification definiert, die sich derzeit im Working Draft befindet. Das bedeutet, sie ist noch in Arbeit und kann sich noch ändern. Aber da Chrome und Firefox sie hinter einem experimentellen Flag unterstützen und Safari Technology Preview Anfang 2021 Unterstützung dafür hinzugefügt hat, gibt es starke Anzeichen dafür, dass aspect-ratio viel an Dynamik gewinnt.

Syntax

aspect-ratio: auto || <ratio>;

Einfach ausgedrückt: aspect-ratio wird standardmäßig entweder als auto angenommen oder akzeptiert einen <ratio> als Wert, wobei <width / height> gilt.

Anfangswert: auto
Gilt für: alle Elemente außer Inline-Boxen und internen Ruby- oder Tabellen-Boxen
Vererbt: nein
Prozentwerte: n/v
Berechneter Wert: angegebenes Schlüsselwort oder ein Zahlenpaar
Animationstyp: diskret

Safari Technology Preview 153 wurde am 7. September 2022 veröffentlicht. In dieser Version ersetzt der Anfangswert von aspect-ratio auto durch default.

Werte

/* Keyword values */
aspect-ratio: auto; /* default */

/* Ratio values */
aspect-ratio: 1 / 1; /* width and height are equal proportion */
aspect-ratio: 2 / 1; /* width is twice the height*/
aspect-ratio: 1 / 2; /* width is half the height */
aspect-ratio: 16 / 9  /* typical video aspect ratio */
aspect-ratio: auto 4 / 3; /* width:height, unless it's a replaced element */
aspect-ratio: 0.5; /* float value */

/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: unset;

auto: Der Standardwert, der angibt, dass das Element kein bevorzugtes Seitenverhältnis hat und sich wie gewohnt dimensionieren sollte. Ersetzte Elemente wie Bilder mit einem intrinsischen Seitenverhältnis verwenden daher dieses Seitenverhältnis.
<ratio>: Zwei positive numerische Werte, die durch einen Schrägstrich (/) mit oder ohne Leerzeichen getrennt sind und sich auf Breite und Höhe des Elements beziehen. Bei einem einzelnen Wert wird der zweite Wert als 1 betrachtet. Größenberechnungen, die ein bevorzugtes Seitenverhältnis beinhalten, arbeiten mit den Dimensionen der Box, die durch box-sizing angegeben sind.
initial: Wendet die Standardeinstellung der Eigenschaft an, die auto ist.
inherit: Übernimmt den aspect-ratio-Wert des Elternelements.
unset: Entfernt das aktuelle Seitenverhältnis vom Element.

Es kann zwei Werte annehmen

Diese Eigenschaft kann gleichzeitig zwei Werte annehmen, einer davon ist auto und der andere ein <ratio>

.element {
  aspect-ratio: auto 1 / 1;
}

Wenn sowohl auto *als auch* ein <ratio> zusammen angegeben werden, ist das bevorzugte Seitenverhältnis das angegebene Verhältnis von Breite geteilt durch Höhe, es sei denn, es handelt sich um ein ersetztes Element mit einem intrinsischen Seitenverhältnis, in diesem Fall wird stattdessen dieses Seitenverhältnis verwendet.

Wie Sie in der folgenden Demo sehen können, werden für ein div und ein <img> (ein ersetztes Element) die gleichen Werte gesetzt. Das div-Element verwendet das <ratio> und wird zu einem Quadrat, aber das Bild folgt seinem intrinsischen Seitenverhältnis. Wenn Sie auto aus den Werten entfernen, können Sie sehen, dass das Bild gezwungen wird, ein Quadrat zu sein.

Es funktioniert bei ersetztem und nicht ersetztem Inhalt

Wenn Sie denken: „Ähm, ja, macht der Browser das nicht schon für uns bei Bildern?“ lautet die Antwort: Absolut. Browser führen einige ausgefeilte Seitenverhältnisberechnungen für ersetzte Inhalte wie Bilder durch. Wenn ein Bild also beispielsweise eine Breite von 500 Pixel hat, biegt der Browser seine CSS-Layout-Algorithmen, um die intrinsischen oder „natürlichen“ Abmessungen des Bildes beizubehalten. Die Eigenschaft aspect-ratio kann verwendet werden, um diese natürlichen Abmessungen effektiv zu überschreiben.

Aber nicht ersetzter Inhalt hat keine natürliche Proportion. Das ist der Großteil dessen, womit wir arbeiten, wie z. B. divs. Anstatt zu versuchen, die natürlichen Proportionen des Elements beizubehalten, legt aspect-ratio eine „bevorzugte“ Größe fest.

Die Spezifikation stellt derzeit fest, dass ältere CSS-Spezifikationen, insbesondere CSS 2.1, keine klare Unterscheidung zwischen ersetztem und nicht ersetztem Inhalt enthalten. Das bedeutet, dass wir einige zusätzliche Sonderfälle in die Spezifikation aufnehmen könnten, um sie zu verdeutlichen. Vorerst sehen wir, dass Browser die Unterstützung für das Festlegen bevorzugter Seitenverhältnisse für ersetzten und nicht ersetzten Inhalt separat einführen, wobei einige der Browser mit früher Unterstützung hinter einem experimentellen Flag möglicherweise nur aspect-ratio für nicht ersetzten Inhalt unterstützen. Es lohnt sich definitiv, die Browserunterstützung im Auge zu behalten, während sie sich weiterentwickelt.

Es funktioniert von selbst, ohne eine `width` oder `height` anzugeben

Also, ja, wir können es einfach wie folgt auf ein Element anwenden

.element {
  aspect-ratio: 16 / 9;
}

…und die Standard-width: auto des Elements wird implizit wirksam, um die Abmessungen des Elements festzulegen.

Es ändert sich, wenn `width` oder `height` auf demselben Element gesetzt sind

Nehmen wir an, wir haben ein Element mit einer Breite von 300px und einem aspect-ratio von 3/1.

.element {
  aspect-ratio: 3 / 1;
  width: 300px;
}

Von Natur aus möchte aspect-ratio die Abmessungen des Elements selbst berechnen und tut dies basierend auf dem Kontext, in dem es verwendet wird. Aber mit der hinzugefügten width wird aspect-ratio angewiesen, die Seitenverhältnis-Box des Elements unter Verwendung von 300px als Breite zu berechnen. Als Ergebnis ist es so, als hätten wir einfach geschrieben

.element {
  height: 100px;
  width: 300px;
}

Das ist logisch! Denken Sie daran, wenn keine width oder height angegeben sind, nimmt der Browser an, dass diese auto sind und geht von dort aus. Wenn wir explizite width- oder height-Werte angeben, werden diese verwendet.

Es wird in einigen Situationen ignoriert

Hier wird es ein wenig verwirrend, da es Fälle gibt, in denen aspect-ratio übersehen wird oder seine Berechnungen von anderen Eigenschaften beeinflusst werden. Dazu gehören:

Wenn sowohl `width` als auch `height` auf dem Element deklariert sind

Wir haben gerade gesehen, wie die Angabe von width *oder* height auf einem Element die Berechnung von aspect-ratio beeinflusst. Aber wenn das Element bereits *sowohl* eine width als auch eine height hat, werden diese anstelle von aspect-ratio verwendet. Es sind beide Eigenschaften erforderlich, um aspect-ratio zu überschreiben; das Festlegen von nur height *oder* width allein bricht das Seitenverhältnis des Elements nicht.

`aspect-ratio` wird ignoriert, wenn sowohl `width` als auch `height` auf demselben Element gesetzt sind.

Das ist doch logisch, oder? Wenn die Verwendung von entweder width oder height dazu führt, dass aspect-ratio diesen Wert in der Berechnung verwendet, dann folgt daraus logischerweise, dass die Verwendung beider aspect-ratio vollständig überschreiben würde, da beide Werte bereits bereitgestellt und festgelegt sind.

Wenn der Inhalt aus dem Verhältnis ausbricht

Einfach ausgedrückt: Wenn Sie ein Element mit einem Seitenverhältnis haben und der Inhalt so lang ist, dass er das Element zum Erweitern zwingt, dann wird sich das Element erweitern. Und wenn sich das Element erweitert, ändern sich seine Abmessungen und somit gibt es kein Seitenverhältnis mehr. Deshalb besagt die Spezifikation, dass die Eigenschaft das „bevorzugte“ Seitenverhältnis festlegt. Es ist bevorzugt, aber nicht vorgeschrieben.

Gefällt Ihnen nicht, wie das funktioniert? Das Festlegen von min-height: 0; auf dem Element ermöglicht es dem Inhalt, das bevorzugte Seitenverhältnis zu überlaufen, anstatt es zu erweitern.

Wenn es gegen `min-` und `max-` Eigenschaften „verliert“

Wir haben gerade gesehen, wie das funktioniert, oder? Wenn der Inhalt die Abmessungen der Box überschreitet, ist das aspect-ratio effektiv verschwunden, da sich die Box mit dem Inhalt ausdehnt. Wir können das mit min-width: 0 überschreiben.

Das liegt daran, dass alle min-* und max-* Eigenschaften typischerweise mit width und height um die Vorherrschaft im Kampf um die Box-Modell-Berechnungen ringen. Zum Beispiel

.element {
  min-width: 500px; /* 🏆 Winner! */
  width: 100px;
}

Aber

.element {
  min-width: 500px;
  width: 700px; /* 🏆 Winner! */
}

Das liegt daran, dass min-width entweder verhindert, dass width unter einen bestimmten Wert fällt, oder es ignoriert wird, weil width das Element bereits über die benötigte Mindestbreite hinaus gesetzt hat. Dasselbe gilt für min-height, max-width und max-height.

Der Punkt bei all dem: Wenn wir sowohl eine min-* oder max-* Eigenschaft auf demselben Element wie aspect-ratio setzen *und* diese gegen width oder height „gewinnen“, dann überschreiben diese aspect-ratio. Ich sagte Ihnen ja, es ist ein wenig verwirrend. 🤯

Anwendungsfälle

Ersetzte Elemente wie Bilder oder Videos haben bereits ein intrinsisches Seitenverhältnis, daher behalten sie beim Wachsen oder Schrumpfen ihr Seitenverhältnis bei, aber nicht ersetzte Elemente haben diesen Luxus nicht und manchmal brauchen Sie dieses Verhalten für sie.

Hier sind einige Beispiele, bei denen aspect-ratio nützlich wird.

Responsive Iframes

Ein sehr häufiger Anwendungsfall ist, wenn Sie einen iframe zur Anzeige eines Videos von einer anderen Website wie YouTube einbetten möchten. In diesem Fall wird das Video deformiert, wenn Sie die Breite auf 100 % und eine Höhe festlegen.

Um einen responsiven iframe zu erhalten, der sein Seitenverhältnis beibehält, können Sie Folgendes tun:

iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

Wenn der iframe über Breite- und Höhenattribute wie diese verfügt

<iframe src="https://example.com" width="800" height="600"></iframe>

…dann können Sie das aspect-ratio automatisch wie folgt festlegen:

iframe[width][height] {
  aspect-ratio: attr(width) / attr(height);
}

Hero-Bilder

Das Setzen eines Hintergrundbilds auf ein Element hat keine Auswirkung auf die Größe dieses Elements. Um also ein Hero-Bild zu erstellen, müssen Sie, wenn das Bild im Hintergrund ist, eine Höhe für das Element festlegen, und eine feste Höhe ist nicht sehr responsiv!

Hier können Sie die Eigenschaft aspect-ratio verwenden, um ein Hero-Element zu erhalten, das das Seitenverhältnis seines background-image beibehält.

.hero {
  aspect-ratio: 4 / 3;
  background: url(background.png);
}

Konsistenz im Rasterlayout

Stellen Sie sich vor, in einem Flexbox- oder Rasterlayout mit Auto-Fill-Mechanismus möchten Sie, dass die Elemente quadratisch bleiben, aber Breite und Höhe der Elemente können sich je nach Inhalt oder Größe ihres übergeordneten Elements verkleinern oder vergrößern, und infolgedessen bleiben die Elemente höchstwahrscheinlich nicht quadratisch.

Das Setzen von aspect-ratio auf 1 / 1 ändert die Höhe dynamisch, während die Breite Ihres Elements skaliert.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.grid-item {
  aspect-ratio: 1 / 1;
}

In der folgenden Bildergalerie wird die Eigenschaft aspect-ratio verwendet, um die Höhe der Bilder bei zufälligen Größen konsistent zu halten. Entfernen Sie aspect-ratio aus der Artikelliste und sehen Sie die Auswirkung.

Außerdem können Sie mit object-fit die Bilder in die richtigen Abmessungen einpassen.

Browser-Unterstützung

Daten zur Unterstützung der mdn-css__properties__aspect-ratio Funktion in den wichtigsten Browsern

Umgang mit der Unterstützung älterer Browser

Bevor es diese Eigenschaft gab, war eine Methode, mit diesem Problem umzugehen, die Padding-Box-Technik, und jetzt können wir dank CSS @supports diese Technik für ältere Browser verwenden.

Im folgenden Beispiel wird die Pseudo-Element-Taktik verwendet, um Fallbacks für die aspect-ratio-Eigenschaft in älteren Browsern hinzuzufügen.

.element {
  aspect-ratio: 1 / 1;
}

@supports not (aspect-ratio: 1 / 1) {
  .element::before {
    float: left;
    padding-top: 100%;
    content: "";
  }

  .element::after {
    display: block;
    content: "";
    clear: both;
  }
}