Verständnis und Festlegung von Seitenverhältnissen
Jedes Element, das auf der Seite dargestellt wird, hat eine Höhe und eine Breite, und somit auch ein Seitenverhältnis, das das Verhältnis zwischen Breite und Höhe beschreibt. Die natürlichen Abmessungen eines Medienobjekts, also seine Größe ohne jegliche Größenanpassungen, Skalierungen, Zooms oder angewandte Ränder, werden als seine natürliche oder intrinsische Größe bezeichnet. Die intrinsische Größe eines Elements wird durch das Element selbst bestimmt und nicht durch angewandte Formatierungen wie Boxmodell oder festgelegte Ränder, Abstände oder Polsterbreiten.
Beim Entwickeln von Websites möchten Sie häufig die Breite eines Elements auf einen Prozentsatz der Ansicht oder der Größe des übergeordneten Containers setzen und die Höhe proportional anpassen, um ein bestimmtes Seitenverhältnis beizubehalten, das von der Größe der Ansicht abhängt. Für ersetzte Elemente wie Bilder und Videos ist die Beibehaltung eines bestimmten Seitenverhältnisses nicht nur notwendig für die Erstellung von responsive Webdesigns, sondern auch ein wesentlicher Bestandteil für eine gute Benutzererfahrung. Die Festlegung des Seitenverhältnisses eines Assets verhindert Lade-Ruckler – das Layout-Shift, das auftritt, wenn Medien geladen werden, nachdem die Seite bereits gerendert wurde, wodurch ein Reflow verursacht wird, weil der Platz für das Asset nicht reserviert wurde.
Mit CSS können Sie die Größe von ersetzten und nicht ersetzten Elementen basierend auf ihrem Seitenverhältnis anpassen. In diesem Leitfaden lernen wir die Eigenschaft aspect-ratio, diskutieren Seitenverhältnisse für ersetzte und nicht ersetzte Elemente und betrachten dann einige gängige Anwendungsfälle für Seitenverhältnisse.
Wie die Eigenschaft aspect-ratio funktioniert
Der CSS-aspect-ratio-Eigenschaftswert definiert das bevorzugte Breite-zu-Höhe-Verhältnis des Elementbox. Der Wert ist entweder ein <ratio>, das Schlüsselwort auto, oder eine aus beiden bestehende, durch Leerzeichen getrennte Kombination.
Das <ratio> ist das Verhältnis von Breite zu Höhe, in dieser Reihenfolge. Es wird durch zwei positive <number>-Werte dargestellt, die durch einen Schrägstrich (/) oder eine einzige <number> getrennt sind. Wenn eine einzelne Zahl verwendet wird, entspricht dies dem Schreiben des Verhältnisses als <number> / 1, was auch die Breite durch die Höhe geteilt ist.
Die folgenden Werte sind alle gleichwertig:
aspect-ratio: 3 / 6;
aspect-ratio: 1 / 2;
aspect-ratio: 0.5 / 1;
aspect-ratio: 0.5;
Die folgenden Werte sind ebenfalls alle gleichwertig:
aspect-ratio: 9/6;
aspect-ratio: 3/2;
aspect-ratio: 1.5;
Die Wirkung des auto-Schlüsselworts hängt davon ab, ob das Element, auf das es angewendet wird, ein ersetztes Element ist oder nicht. Für ersetzte Elemente mit einem intrinsischen Seitenverhältnis bedeutet auto, dass das intrinsische Seitenverhältnis verwendet werden soll. In allen anderen Fällen bedeutet der auto-Wert, dass die Box kein bevorzugtes Seitenverhältnis hat. In beiden Fällen ist dies das Standardverhalten, als ob keine aspect-ratio-Eigenschaft angewendet wurde.
Wenn der Wert sowohl das auto-Schlüsselwort als auch einen <ratio>-Wert enthält, wie z.B. aspect-ratio: auto 2 / 3; oder aspect-ratio: 0.75 auto;, wird der auto-Wert auf ersetzte Elemente mit einem natürlichen Seitenverhältnis angewendet und das angegebene Verhältnis von width / height oder <number> als bevorzugtes Seitenverhältnis verwendet.
Sie werden das Wort "bevorzugt" in den obigen Definitionen bemerkt haben. Der aspect-ratio-Wert wird nicht immer angewendet, wenn er festgelegt ist. Die Eigenschaft aspect-ratio legt ein "bevorzugtes" Seitenverhältnis fest und hat daher nur dann eine Wirkung, wenn mindestens eine der Größen automatisch ist.
Wenn sowohl die Höhe als auch die Breite oder die Inline- und Block-Größen explizit festgelegt sind, wird der aspect-ratio-Eigenschaftswert ignoriert. In diesem Fall darf keine Dimension automatisch sein - die bevorzugten Größen sind ausdrücklich festgelegt - somit hat die aspect-ratio-Eigenschaft keinen Effekt. Wenn sowohl die Inline- als auch die Block-Dimensionen erklärt sind, haben diese Vorrang.
Bei ersetzten Elementen, wenn Sie keinen Wert explizit (außer auto) auf eine der Dimensionen setzen, werden beide auf ihre intrinsische Größe zurückgesetzt (jeder aspect-ratio-Wert wird nicht angewendet). Der aspect-ratio wird auf nicht ersetzte Elemente angewendet, die keine explizit festgelegte Dimension haben, da nicht ersetzte Elemente entweder intrinsisch oder extrinsisch dimensioniert sind und ihre Größe von ihrem Inhalt, Container, Boxmodell Eigenschaften usw. erhalten.
Wenn ein Element auf der Seite gerendert wird, ohne dass CSS angewendet oder HTML-Größenattribute enthalten sind, rendert der Benutzeragent das Objekt in seiner natürlichen Größe.
Anpassung der Seitenverhältnisse von ersetzten Elementen
Ersetzte Elemente wie <img> und <video> werden durch Medien ersetzt, die festgelegte Dimensionen und somit ein intrinsisches Seitenverhältnis haben. Betrachten Sie ein Rasterbild, wie ein JPEG, PNG oder GIF. Wenn Sie ein Bild auf eine Seite platzieren und keine Höhe oder Breite festlegen, weder über <img>-Attribute noch mit CSS, wird es in seiner intrinsischen Größe angezeigt.
Dies ist ein 220px quadratisches Bild ohne angewendetes CSS; es wird in seiner intrinsischen oder Standardgröße angezeigt.
Wenn ersetzter Inhalt automatisch dimensioniert ist oder Sie lediglich eine Dimension angeben, wie z.B. einen Wert für width, wird der Browser automatisch die andere Dimension ändern, in diesem Fall die Höhe, während das ursprüngliche Seitenverhältnis des Mediums beibehalten wird.
In diesem Beispiel ist nur die width am Bild gesetzt, sodass der Benutzeragent das Seitenverhältnis beibehält. Dasselbe Bild wird dreimal wiederholt und in unterschiedlichen Breiten angezeigt: 55px, 110px und in seiner natürlichen Größe von 220px durch den width: auto-Wert.
Nur wenn Sie Größen für beide Dimensionen angeben, besteht die Gefahr, das ersetzte Element zu verzerren. Beispielsweise erzeugt das Setzen von width: 100vw; und height: 100vh; auf einem Bild ein variables Seitenverhältnis; das Bild wird entweder gestreckt oder gestaucht erscheinen, wenn das Seitenverhältnis der Ansicht von dem Bilds natürlichen Seitenverhältnis abweicht.
In diesem Beispiel wird dasselbe Bild dreimal wiederholt, explizit mit demselben height-Wert (110px) aber unterschiedlichen width-Werten (55px, 110px und 220px) dimensioniert.
Wir haben die Bilder absichtlich verzerrt, indem wir sowohl eine height als auch eine width gesetzt haben: wir haben das erste gestaucht und das dritte gestreckt.
Wir hätten denselben verzerrten Effekt mit der CSS-aspect-ratio-Eigenschaft erzeugen können, indem eine einzelne Dimension (nicht beide oder keine) gesetzt und ein anderer Wert als 1 (oder 1 / 1) bereitgestellt wird. Sie wollen dies wahrscheinlich nicht tun, aber es ist gut zu wissen, dass es möglich ist.
img {
height: 90vh;
aspect-ratio: 3;
}
Wir haben eine einzelne Dimension erklärt; 100vh ist die volle Höhe der Beispiel-<iframe>-Ansicht. Damit aspect-ratio auf ersetzte Elemente angewendet werden kann, darf nur eine Dimension festgelegt sein. Das Setzen beider oder keiner funktioniert nicht.
Anpassen ersetzter Elemente an ihre Container
Um ein ersetztes Element an die Dimensionen seines Containers, während der Beibehaltung seines intrinsischen Seitenverhältnisses, anzupassen, setzen Sie den object-fit-Eigenschaftswert auf cover oder contain. Dies wird das ersetzte Element in der Größe anpassen und es entweder abschneiden, um den Container zu "abdecken", oder in einer kleineren Größe anzeigen, vollständig innerhalb davon "enthalten".
In diesem Beispiel wird das quadratische Bild in einem Raster von drei Elementen platziert, jedes mit einem Seitenverhältnis von 5 / 2.
Zuerst erstellen wir einen Container mit drei Elementen, die jeweils ein Bild enthalten:
<div class="grid">
<div>
<img
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />
</div>
<div>
<img
class="cover"
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />
</div>
<div>
<img
class="contain"
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />
</div>
</div>
Als nächstes definieren wir den Container als ein Raster, wobei jedes Element ein Seitenverhältnis von 2.5 (5/2) und eine Mindestbreite von 150px hat. Die Mindesthöhe wird somit 60px sein. Die endgültige Breite und Höhe wird jedoch durch die Breite des Beispiels-iframe, das auf Ihrer Ansichtsgröße basiert, bestimmt:
.grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
font-size: 0; /* to minimize whitespace */
}
div div {
aspect-ratio: 5 / 2;
background-color: #cccccc;
}
Wir dimensionieren dann die Bilder und setzen die object-fit-Eigenschaft auf die letzten beiden Bilder:
img {
height: 100%;
width: 100%;
}
.cover {
object-fit: cover;
}
.contain {
object-fit: contain;
}
Nur das erste Bild ist verzerrt (gestreckt). Wir hätten den fill-Wert von object-fit verwenden können, um denselben Effekt zu erzeugen. Das cover-Bild erstreckt sich über die volle Breite des Containers, ist vertikal zentriert und zur Anpassung an den Container zugeschnitten. Der contain-Wert stellt sicher, dass das Bild innerhalb des Containers enthalten ist, sitzt horizontal zentriert und ist geschrumpft, um zu passen.
Festlegen von Seitenverhältnissen für nicht ersetzte Elemente
Während das Seitenverhältnis eines ersetzten Elements standardmäßig beibehalten wird, ändert sich das Seitenverhältnis eines nicht ersetzten Elements normalerweise, wenn die intrinsische Größe angepasst wird. Beispielsweise kann derselbe Inhalt als drei Zeilen auf einem Breitbild oder in einem weiten übergeordneten Container erscheinen, aber als acht Zeilen auf einem schmalen Bildschirm oder Container.
In diesem Beispiel wird dasselbe Zitat in 200px und 600px breiten Containern angezeigt, und ein Quadrat wird mit einer Höhe eingestellt, die seiner 200px Breite entspricht:
Um das Problem mit der Einstellung des Seitenverhältnisses eines nicht ersetzten Elements über die Abmessungsgrößen hervorzuheben, wechseln Sie die overflow-Eigenschaft zwischen auto und visible.
blockquote {
width: 200px;
}
blockquote:nth-of-type(2) {
width: 600px;
}
blockquote:nth-of-type(3) {
height: 200px;
}
Während es möglich ist, ein Seitenverhältnis auf nicht ersetzten Elementen durch das Setzen beider Dimensionen und das Verbergen überlaufender Inhalte zu definieren, bietet die CSS-aspect-ratio-Eigenschaft explizite Unterstützung für Seitenverhältnisse. Dies bedeutet, dass ein spezifisches Seitenverhältnis festgelegt werden kann, selbst wenn Sie die Inhalte oder Bildschirmgrößen nicht kennen.
Im nächsten Beispiel rendert sich das Zitatfeld quadratisch, unabhängig von der Breite des Textes, indem aspect ratio: 1 auf <blockquote>, ein nicht ersetztes Element, gesetzt wird:
blockquote {
inline-size: max-content;
aspect-ratio: 1;
}
Jedes Zitatfeld hat eine Dimension festgelegt: die inline-size, die in horizontalen Sprachen die Breite ist, ist auf max-content gesetzt, was die Größe so einstellt, dass sie breit genug ist, um die Inhalte ohne Umbruch zu umfassen. Die zweite Dimension, in diesem Fall die block-size oder height, ist so eingestellt, dass sie dieselbe Länge wie die erste Dimension hat. Dies wird durch die aspect-ratio-Eigenschaft erreicht. Wir haben das gewünschte Breite-zu-Höhe-Verhältnis des Elementrahmens auf 1 festgelegt, was dem gleichen entspricht wie 1 / 1, also ein Quadrat. Der Blockrichtung passt sich der Breite des Elements an, ohne die height oder block-size-Eigenschaften zu verwenden.
In diesen Beispielen wurde die Größe explizit auf dem Element selbst festgelegt. Beim Arbeiten mit nicht ersetzten Elementen kommt das Seitenverhältnis ins Spiel, wenn keine Abmessungsgrößen explizit festgelegt sind.
Einen Kreis basierend auf der Containergröße erstellen
Die Inline-Größe von nicht ersetzten Blockebenen-Elementen ist die Größe ihrer Inhaltsbox des Containers. Da sie standardmäßig eine Größe haben, müssen sie keine explizite Größe für die aspect-ratio-Eigenschaft festlegen.
In diesem Beispiel haben wir einen Container <div>, der 200px breit ist, wobei 5px Polsterung auf jeder Seite enthalten sind. Daher ist die Inline-Größe der Inhaltsbox 190px. Ohne ein height oder width auf dem verschachtelten <p>-Element festzulegen, wissen wir seine Inline-Größe ist 190px. Mit aspect-ratio: 1 gesetzt, wird der Absatz 190px hoch, es sei denn, er hat sichtbare überfüllende Inhalte, die ihn größer machen (was er nicht hat).
Die Höhe des <div>-Elements wird nicht explizit festgelegt, enthält aber den 190px hohen Absatz, die 5px Polsterung oben und unten, und die kombinierten Höhen der Standard-Top- und Bottom-Ränder des <p>. Somit ist er höher, als er breit ist. Beide Elemente haben einen border-radius von 50%, daher ist der Container ein Oval, während das Kind, mit einem aspect-ratio von 1, aber ohne explizit definierte Inline- oder Blockgrößen, ein Kreis ist.
<div><p>Hello world</p></div>
div,
p {
border-radius: 50%;
}
div {
width: 200px;
padding: 5px;
border: 1px solid black;
background-color: #66ccff;
}
p {
aspect-ratio: 1;
text-align: center;
border: 10px solid white;
background-color: #f4aab9;
}
Um das <div> zu einem Kreis zu machen, können wir die height und width auf denselben Wert setzen, oder aspect-ratio: 1 setzen und den overflow auf auto oder hidden tätig. Alternativ können wir einfach die Ränder auf dem Absatz mit margin-block: 0 entfernen. Beide Optionen werden unten gezeigt.
<div><p>Hello world</p></div>
<div><p>Hello world</p></div>
div,
p {
aspect-ratio: 1;
border-radius: 50%;
}
div:first-of-type {
overflow: hidden;
}
div:last-of-type p {
margin-block: 0;
}
Häufige Anwendungsfälle für aspect-ratio
Schauen wir uns ein paar Situationen an, in denen Sie aspect-ratio verwenden können, um einige gängige Herausforderungen bei der Erstellung von responsiven Designs zu lösen.
Externe Assets reaktionsfähig machen
Alle Inhalte sollten reaktionsfähig sein, auch wenn diese Inhalte Drittanbieterembeds wie Videos von TikTok, YouTube, oder Instagram sind. Der Codeausschnitt, den Sie zum Einbetten dieser externen Videos einfügen, erzeugt im Allgemeinen ein <iframe>.
Während ein <video>-Element normalerweise das Seitenverhältnis seiner Mediendatei annimmt, fehlt bei iframe-Elementen diese Fähigkeit. Dies stellt das Problem sicherzustellen, dass das <iframe> immer reaktionsfähig ist und gleichzeitig das Seitenverhältnis des darin enthaltenen Videos beibehält. Eine der Techniken, die wir verwenden können, ist, die Breite des iframes auf 100% seines Containers oder 100vw zu setzen, um der Breite des Viewports, ungeachtet der Viewportgröße, zu entsprechen. Das Festlegen einer festen Höhe könnte jedoch das Video strecken oder stauchen. Stattdessen setzen wir die aspect-ratio auf den Container des Videos, damit sie dasselbe Seitenverhältnis hat wie das Video. Problem gelöst!
Zur Verdeutlichung beträgt das Standardseitenverhältnis von YouTube-Videos 16:9, wenn sie auf einem Desktop-Computer oder Laptop angezeigt werden, während TikTok- und Instagram-Videos ein 9:16 Seitenverhältnis haben.
.youtube {
aspect-ratio: 16/9;
}
.instagram,
.tiktok {
aspect-ratio: 9/16;
}
Wir können die aspect-ratio-Funktion innerhalb der @media-Abfrage zusammen mit der aspect-ratio-Eigenschaft verwenden, um die Größe sowohl des iframes als auch des darin enthaltenen Videos anzupassen. Dies stellt sicher, dass der Videoinhalt immer so groß wie möglich ist – entweder die vollständige Breite oder Höhe des Viewports einnehmend, unabhängig von der Viewportgröße – während ein bestimmtes Seitenverhältnis beibehalten wird.
Wir können festlegen, dass die landschaftsorientierten YouTube-Videos so breit wie der Viewport sind und die hochformatigen Tiktok- und Instagram-Video- iframes so hoch wie der Viewport sind. Wenn das Seitenverhältnis eines Viewports breiter als 16:9 ist, stellen wir das YouTube-Video auf die Höhe des Viewports ein. Wenn der Viewport schmaler als 9:16 ist, setzen wir beide Instagram- und TikTok-Videos auf die Breite des Viewports.
iframe.youtube {
aspect-ratio: 16/9;
width: 100vw;
height: auto;
}
iframe.instagram,
iframe.tiktok {
aspect-ratio: 9/16;
height: 100vh;
width: auto;
}
/* If the viewport is very wide but not very tall */
@media (aspect-ratio > 16 / 9) {
iframe.youtube {
width: auto;
height: 100vh;
}
}
/* If the viewport is very tall but not very wide */
@media (aspect-ratio < 9 / 16) {
iframe.instagram,
iframe.tiktok {
height: auto;
width: 100vw;
}
}
Rasterzellen quadratisch machen
Ein Raster mit quadratischen Zellen kann durch das Definieren fester Spaltenspurdimensionen erstellt werden, wobei jede Zeile die Größe der Spaltenspur annimmt. Wenn jedoch reaktive Raster mit auto-fill erstellt werden, um so viele Spaltenspuren wie möglich innerhalb des Containers zu passen, wird die Breite jedes Elements unklar. Dies macht es schwierig, die angemessene Höhe festzulegen, um quadratische Elemente zu schaffen.
Indem das Seitenverhältnis auf die Elemente eingestellt wird, können wir sicherstellen, dass, wenn die Rasterelemente layoutiert werden, jedes Rasterelement so hoch wie breit ist und somit quadratische Rasterelemente entsteht, unabhängig von den Containerdimensionen.
In diesem Beispiel von quadratischen Rasterelementen sind die Rasterspuren automatisch dimensioniert und nehmen ihre Größe aus den Elementen. Jedes Element wird mindestens 95px breit, könnte aber viel breiter sein. Egal wie breit, jedes Element wird ein Quadrat sein, mit der Höhe bestimmt durch das aspect-ratio, um ihrer Breite zu entsprechen.
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
}
.item {
aspect-ratio: 1;
}
Damit der Inhalt eines Rasterelements nicht über die bevorzugte Höhe hinauswächst, die durch das aspect-ratio gesetzt wird, setzen Sie die min-height auf 0 und overflow auf einen anderen Wert als visible. Dies wird für intrinisch dimensionierte Inhalte funktionieren. Wenn Sie Inhalte haben, die größer als der verfügbare Raum sind, setzen Sie diese Inhalte auf nicht größer als das Rasterelement, indem Sie die max-height (oder max-width, je nach Inhalt) auf 100% setzen.
.item {
min-height: 0;
overflow: auto;
}
.item > * {
max-height: 100%;
}
Spezifikationen
| Specification |
|---|
| CSS Box Sizing Module Level 3 # aspect-ratio |
Siehe auch
- CSS-Boxmodell Modul