Seitenverhältnis - CSS-Tricks

Mit der CSS-Eigenschaft aspect-ratiokönnen Sie Felder erstellen, die proportionale Abmessungen beibehalten, wobei das heightund widtheines Felds automatisch als Verhältnis berechnet wird. Es ist ein wenig mathematisch, aber die Idee ist, dass Sie einen Wert für diese Eigenschaft durch einen anderen teilen können und der berechnete Wert sicherstellt, dass eine Box in diesem Verhältnis bleibt.

.element ( aspect-ratio: 2 / 1; /* ↔️ is double the ↕️ */ ) .element ( aspect-ratio: 1 / 1; /* ⏹ a perfect square */ )

aspect-ratioist in der Spezifikation des CSS Box Sizing Module Level 4 definiert, die sich derzeit im Arbeitsentwurf befindet. Das heißt, es ist noch im Gange und kann sich ändern. Aber da Chrome und Firefox es hinter einer experimentellen Flagge unterstützen und Safari Technology Preview Anfang 2021 Unterstützung dafür hinzufügt, gibt es starke Signale, aspect-ratiodie viel an Dynamik gewinnen.

Syntax

aspect-ratio: auto || ;

Im Klartext: aspect-ratiowird entweder autostandardmäßig angenommen oder akzeptiert a als Wert wo .

• Ursprünglicher Wert: auto
• Gilt für: alle Elemente außer Inline-Boxen und internen Rubin- oder Tabellenboxen
• Geerbt: nein
• Prozentsätze: n / a
• Berechneter Wert: angegebenes Schlüsselwort oder ein Zahlenpaar
• Animationstyp: diskret

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 */ /* Global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset;

Es funktioniert mit ersetzten und nicht ersetzten Inhalten

Wenn Sie denken: "Ähm, ja, macht der Browser das nicht schon für uns bei Bildern?" Die Antwort lautet: absolut . Browser führen einige ausgefallene Seitenverhältnisberechnungen für ersetzte Inhalte wie Bilder durch. Wenn ein Bild 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 aspect-ratioEigenschaft kann verwendet werden, um diese natürlichen Dimensionen effektiv zu überschreiben.

Aber nicht ersetzten Inhalt hat kein natürliches Verhältnis. Das ist das meiste, mit dem wir arbeiten, wie Divs. Anstatt zu versuchen, die natürlichen Proportionen des Elements beizubehalten, wird aspect-ratioeine „bevorzugte“ Größe festgelegt.

In der Spezifikation wird derzeit festgestellt, dass ältere CSS-Spezifikationen, insbesondere CSS 2.1, keine klare Unterscheidung zwischen ersetztem und nicht ersetztem Inhalt enthalten. Das heißt, wir könnten einige zusätzliche Sonderfälle zur Spezifikation hinzufügen, um sie zu klären. Derzeit wird in Browsern die Unterstützung für das Festlegen bevorzugter Seitenverhältnisse für ersetzte und nicht aspect-ratioersetzte Inhalte eingeführt , wobei einige Browser mit früher Unterstützung hinter einem experimentellen Flag möglicherweise nur nicht ersetzte Inhalte unterstützen. Es lohnt sich auf jeden Fall, die Browserunterstützung im Auge zu behalten.

Es funktioniert alleine ohne Angabe eines widthoderheight

Also, ja, wir können es einfach auf ein Element wie dieses legen:

.element ( aspect-ratio: 16 / 9; )

… Und die Standardeinstellung des Elements wird width: autoimplizit aktiviert , um die Abmessungen des Elements festzulegen.

Es ändert sich, wenn widthoder heightsich auf demselben Element befinden

Angenommen, wir haben ein Element mit einer Breite von 300pxund einem aspect-ratiovon 3/1.

.element ( aspect-ratio: 3 / 1; width: 300px; )

Möchte von Natur aus aspect-ratiodie Abmessungen des Elements selbst berechnen und wird dies basierend auf dem Kontext tun, in dem es verwendet wird. Aber damit widthgeworfen in, sagt er Aspektverhältnis des Elements Seitenverhältnis Box mit zu berechnen , 300pxwie die Breite. Infolgedessen ist es so, als wären wir gerade geschrieben:

.element ( height: 100px; width: 300px; )

Das macht Sinn! Denken Sie daran, wenn nein widthoder heightangegeben sind, geht der Browser davon aus, dass dies der Fall ist, autound geht von dort aus. Wenn wir explizite widthund heightWerte angeben, werden diese verwendet.

Es wird in einigen Situationen ignoriert

Dies ist der Punkt, an dem die Dinge ein wenig nervenaufreibend werden, weil es Fälle gibt, in denen aspect-ratioübersehen wird oder die Berechnungen von anderen Eigenschaften beeinflusst werden. Das beinhaltet:

Wenn beide widthund heightfür das Element deklariert sind

Wir haben gerade gesehen, wie sich das Deklarieren von entweder widthoder heighton und element auf die Berechnung von auswirkt aspect-ratio. Wenn das Element jedoch bereits ein widthund hat height, werden diese anstelle von verwendet aspect-ratio. Beide Eigenschaften müssen überschrieben werden aspect-ratio. Wenn Sie entweder heightoder widthallein einstellen, wird das Seitenverhältnis des Elements nicht beeinträchtigt.

Macht Senes, richtig? Wenn einer von beiden verwendet wird widthoder heighterzwungen wird aspect-ratio, diesen Wert in der Berechnung zu verwenden, folgt logischerweise, dass die Verwendung von beiden vollständig überschrieben wird, aspect-ratioda 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 das Element zum Erweitern gezwungen wird, wird das Element erweitert. Und wenn sich das Element ausdehnt, ändern sich seine Abmessungen und damit kein Seitenverhältnis mehr. Aus diesem Grund besagt die Spezifikation, dass die Eigenschaft das „bevorzugte“ Seitenverhältnis festlegt. Es wird bevorzugt, aber nicht verschrieben.

Gefällt dir nicht, wie das funktioniert? Durch Festlegen min-height: 0;des Elements kann der Inhalt das bevorzugte Seitenverhältnis überschreiten, anstatt es zu erweitern.

Wenn es an min-*und max-*Eigenschaften "verliert"

Wir haben nur irgendwie gesehen, wie das funktioniert, oder? Wenn der Inhalt die Abmessungen der Box überschreitet, aspect-ratioist die Box praktisch nicht mehr vorhanden, da sich die Box mit dem Inhalt erweitert. Wir können das mit überschreiben min-width: 0.

Das ist , weil alle der min-*und max-*Eigenschaften , die typischerweise Kampf widthund heightum die Vorherrschaft im Krieg über Box Modellrechnungen. Zum Beispiel:

.element ( min-width: 500px; /* ? Winner! */ width: 100px; )

Aber:

.element ( min-width: 500px; width: 700px; /* ? Winner! */ )

Dies min-widthliegt daran, dass entweder verhindert wird width, dass ein bestimmter Wert unterschritten wird, oder dass dies ignoriert wird, da widthdas Element bereits über die erforderliche Mindestbreite hinaus festgelegt wurde. Das gleiche gilt für min-height, max-width, und max-height.

Der Punkt von all dem: Wenn wir beide a min-*oder max-*Eigenschaft auf dasselbe Element setzen wie aspect-ratiound sie "gewinnen" widthoder height, dann werden diese überschreiben aspect-ratio. Ich habe dir gesagt, dass es ein bisschen nervenaufreibend ist. ?

Browser-Unterstützung

IE	Kante	Feuerfuchs	Chrom	Safari	Oper
Nein	Nein	86 1.2,3	90 4	TP 5	Nein

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
Nein	Nein	Nein	Nein	Nein

Mehr Informationen

Artikel am 1. Juli 2020

Ein erster Blick auf das Seitenverhältnis

Sara Cope