Ein erster Blick auf `aspect-ratio`

Oh hey! Eine brandneue Eigenschaft, die die Größe einer Box beeinflusst! Das ist eine große Sache. Es gibt bereits viele Möglichkeiten, eine Box mit Seitenverhältnis zu erstellen (und ich würde sagen, diese Lösung auf benutzerdefinierten Eigenschaften basierend ist die beste), aber keine davon ist besonders intuitiv und sicherlich nicht so einfach wie die Deklaration einer einzelnen Eigenschaft.

Daher dachte ich angesichts der bevorstehenden Einführung von aspect-ratio (MDN, und nicht zu verwechseln mit der Media-Query-Version), dass ich mir ansehen sollte, wie es funktioniert und versuchen sollte, es zu verstehen.

Ein Gruß an Una, wo ich das zum ersten Mal gesehen habe und wie sehr es die Leute interessiert hat. Hier spiele ich ein wenig damit herum.

Wenn Sie aspect-ratio einfach nur auf ein Element anwenden, wird eine Höhe basierend auf der auto-Breite berechnet.

Ohne eine Breite festzulegen, hat ein Element immer noch eine natürliche automatische Breite. Die Höhe kann also aus dem Seitenverhältnis und der gerenderten Breite berechnet werden.

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

Wenn der Inhalt aus dem Seitenverhältnis ausbricht, dehnt sich das Element trotzdem aus.

Das Seitenverhältnis wird in dieser Situation ignoriert, was tatsächlich gut ist. Deshalb war die Pseudo-Element-Taktik für Seitenverhältnisse beliebt, da sie uns bei zu viel Inhalt nicht in gefährliche Datenverlust- oder unangenehme Überlappungssituationen brachte.

Wenn Sie jedoch die Höhe auf das Seitenverhältnis beschränken möchten, können Sie dies tun, indem Sie min-height: 0; hinzufügen.

Wenn das Element entweder eine Höhe oder eine Breite hat, wird die andere aus dem Seitenverhältnis berechnet.

aspect-ratio ist also im Grunde eine Möglichkeit, die andere Richtung festzulegen, wenn Sie nur eine haben.

Wenn das Element sowohl eine Höhe als auch eine Breite hat, wird aspect-ratio ignoriert.

Die Kombination aus expliziter Höhe und Breite ist "stärker" als das Seitenverhältnis.

Berücksichtigung von min-* und max-*

Es gibt immer eine gewisse Spannung zwischen width, min-width und max-width (oder den Höhenvarianten). Einer davon "gewinnt" immer. Das ist im Allgemeinen ziemlich intuitiv.

Wenn Sie width: 100px; und min-width: 200px; festlegen, gewinnt min-width. min-width wird also entweder ignoriert, weil Sie bereits darüber liegen, oder es gewinnt. Dasselbe gilt für max-width: Wenn Sie width: 100px; und max-width: 50px; festlegen, gewinnt max-width. max-width wird also entweder ignoriert, weil Sie bereits darunter liegen, oder es gewinnt.

Es scheint, dass diese allgemeine Intuitivität auch hier weitergegeben wird: Die Eigenschaften min-* und max-* gewinnen entweder oder sind irrelevant. Und wenn sie gewinnen, brechen sie das aspect-ratio.

.el {
  aspect-ratio: 1 / 4;
  height: 500px;

  /* Ignored, because width is calculated to be 125px */
  /* min-width: 100px; */

  /* Wins, making the aspect ratio 1 / 2 */
  /* min-width: 250px; */
}

Mit Wertfunktionen

Seitenverhältnisse sind immer am nützlichsten in flüssigen Situationen oder immer dann, wenn Sie im Wesentlichen eine der Dimensionen nicht im Voraus kennen. Aber selbst wenn Sie sie nicht kennen, legen Sie oft Einschränkungen fest. Sagen wir, 50% Breite ist in Ordnung, aber Sie möchten nur, dass sie nicht kleiner als 200px wird. Sie könnten max(50%, 200px); verwenden. Oder auf beiden Seiten mit clamp(200px, 50%, 400px); einschränken.

Dies scheint intuitiv zu funktionieren.

.el {
  aspect-ratio: 4 / 3;
  width: clamp(200px, 50%, 400px);
}

Aber sagen Sie, Sie stoßen auf diese mindestens 200px und wenden dann eine min-width von 300px an? Die min-width gewinnt. Das ist immer noch intuitiv, aber es wird verwirrend, weil so viele Eigenschaften, Funktionen und Werte beteiligt sein können.

Vielleicht ist es hilfreich, aspect-ratio als die schwächste Methode zur Größenbestimmung eines Elements zu betrachten?

Es wird nie irgendeine andere Größeninformation übertreffen, aber es wird immer seine Größenbestimmung durchführen, wenn keine andere Information für diese Dimension verfügbar ist.