Neue CSS-Eigenschaft für das Seitenverhältnis wird in Chromium, Safari Technology Preview und Firefox Nightly unterstützt

Die neue CSS-Eigenschaft, die dazu beiträgt, die Abstände in responsiven Layouts beizubehalten.

Una Kravets

Seitenverhältnis

Das Seitenverhältnis wird in der Regel mit zwei Ganzzahlen und einem Doppelpunkt in den folgenden Abmessungen angegeben: width:height oder x:y. Die gängigsten Seitenverhältnisse für Fotografie sind 4:3 und 3:2, während Videos, und neuere Verbraucherkameras haben in der Regel ein Seitenverhältnis von 16:9.

</ph>

Mit dem Aufkommen des responsiven Designs ist die Beibehaltung des Seitenverhältnisses für für Webentwickler, insbesondere da die Bildabmessungen unterschiedlich sind und sich die Elementgrößen je nach verfügbarem Leerzeichen.

Hier sind einige Beispiele für Fälle, in denen die Beibehaltung des Seitenverhältnisses wichtig ist:

• Erstellen responsiver iFrames, deren Breite und Höhe 100% der Breite eines übergeordneten Elements entsprechen ein bestimmtes Verhältnis des Darstellungsbereichs
• Intrinsische Platzhaltercontainer für Bilder, Videos und Einbettungen erstellen Damit wird verhindert, dass das Layout neu angeordnet wird, wenn die Elemente geladen werden und Speicherplatz belegen.
• Erstellen eines einheitlichen, responsiven Bereichs für interaktive Datenvisualisierungen oder SVG-Animationen
• Einheitlichen, responsiven Bereich für Komponenten mit mehreren Elementen wie Karten oder Kalenderdaten schaffen
• Erstellen eines einheitlichen, responsiven Bereichs für mehrere Bilder unterschiedlicher Abmessungen (kann zusammen mit object-fit)

Objektanpassung

Das Festlegen eines Seitenverhältnisses hilft uns bei der Größenanpassung von Medien in einem responsiven Kontext. Ein anderes Tool in dieser Bucket ist das Attribut object-fit, mit dem Nutzer beschreiben können, wie ein Objekt (z. B. ein Bild) innerhalb eines Blocks sollte diesen Block ausfüllen:

</ph>

Mit den Werten initial und fill wird das Bild so angepasst, dass es den Platz ausfüllt. In unserem Beispiel führt das dazu, das Bild wird zerquetscht und verschwommen dargestellt, da die Pixel angepasst werden. Nicht ideal. object-fit: cover verwendet die kleinste Abmessung des Bildes, um den Raum auszufüllen, und schneidet das Bild entsprechend zu. Dimension. Es „zoomt heran“ an der untersten Grenze liegen. Mit object-fit: contain wird sichergestellt, dass das gesamte Bild ist immer sichtbar, und so das Gegenteil von cover, bei dem die Größe der größten Begrenzung angenommen wird. (im obigen Beispiel die Breite) und passt die Größe des Bildes so an, dass sein ursprüngliches Seitenverhältnis erhalten bleibt. während sie in den Raum passen. Das object-fit: none-Case zeigt das Bild in der Mitte zugeschnitten. (Standardobjektposition) in natürlicher Größe angezeigt wird.

object-fit: cover funktioniert in den meisten Situationen, um eine einheitliche Benutzeroberfläche für den Umgang mit mit Bildern unterschiedlicher Abmessungen, gehen jedoch auf diese Weise verloren (das Bild wird auf der längsten Kanten).

Wenn diese Details wichtig sind (z. B. beim Arbeiten mit einer Reihe von Kosmetikprodukten), ist das Zuschneiden wichtiger Inhalte nicht akzeptabel. Das ideale Szenario wären also responsive Bilder verschiedene Größen, die in den Bereich der Benutzeroberfläche passen, ohne sie zuzuschneiden.

Der alte Tipp: Seitenverhältnis mit padding-top beibehalten

</ph>

Um diese reaktionsschneller zu machen, können wir das Seitenverhältnis verwenden. So können wir eine Verhältnisgröße und legen die restlichen Medien auf einer einzelnen Achse (Höhe oder Breite) fest.

Eine derzeit gut anerkannte browserübergreifende Lösung zur Aufrechterhaltung des Seitenverhältnisses auf Basis der wird als "Padding-Top Hack" bezeichnet. Für diese Lösung sind ein übergeordneter Container und ein absolut platzierten untergeordneten Container. Dann wird das Seitenverhältnis als Prozentsatz berechnet, als padding-top. Beispiel:

• Seitenverhältnis 1:1 = 1 / 1 = 1 = padding-top: 100%
• Seitenverhältnis 4:3 = 3 / 4 = 0,75 = padding-top: 75%
• Seitenverhältnis: 3:2 = 2 / 3 = 0,66666 = padding-top: 66.67%
• Seitenverhältnis: 16:9 = 9 / 16 = 0,5625 = padding-top: 56.25%

Nachdem Sie den Wert für das Seitenverhältnis ermittelt haben, können Sie ihn auf den übergeordneten Container anwenden. Dazu ein Beispiel:

<div class="container">
  <img class="media" src="..." alt="...">
</div>

Wir könnten dann den folgenden CSS-Code schreiben:

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

Seitenverhältnis wird mit aspect-ratio beibehalten

</ph>

Die Berechnung dieser padding-top-Werte ist leider nicht sehr intuitiv und erfordert einige zusätzlicher Aufwand und Positionierung. Mit dem neuen integrierten aspect-ratio CSS Property, die Sprache zum Verwalten des Aspekts Verhältnisse viel deutlicher.

Mit demselben Markup können wir padding-top: 56.25% durch aspect-ratio: 16 / 9 ersetzen, wobei aspect-ratio zu einem angegebenen Verhältnis von width / height.

.container {
  width: 100%;
  padding-top: 56.25%;
}

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Die Verwendung von aspect-ratio anstelle von padding-top ist viel klarer und führt nicht zu einer Änderung des Abstands eine Aktion außerhalb des üblichen Umfangs durchführen.

Mit dieser neuen Property können Sie Seitenverhältnis auf auto festlegen, wobei „ersetzte Elemente mit einem unveränderlichen Seitenverhältnis dieses Seitenverhältnis verwenden“ Verhältnis Andernfalls hat das Feld kein bevorzugtes Seitenverhältnis.“ Wenn sowohl auto als auch <ratio> gleich angegeben ist, ist das bevorzugte Seitenverhältnis das angegebene Verhältnis von width geteilt durch height, es sei denn, es ist ein ersetztes Element mit ein unveränderliches Seitenverhältnis.

Beispiel: Einheitlichkeit in einem Raster

Dies funktioniert auch sehr gut mit CSS-Layoutmechanismen wie CSS Grid und Flexbox. Eine Liste erwägen bei untergeordneten Elementen, die ein Seitenverhältnis von 1:1 beibehalten möchten, z. B. ein Raster mit Unterstützer-Symbolen:

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

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

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

Beispiel: Layout Shifts verhindern

Eine weitere tolle Funktion von aspect-ratio ist, dass Platzhalterbereiche erstellt werden können, Cumulative Layout Shift und die Bereitstellung besserer Web Vitals. In diesem ersten Wird z. B. ein Asset über eine API wie Unsplash geladen, wird ein Layout Shift nach, wenn die Medien fertig geladen sind.

Mit aspect-ratio wird dagegen ein Platzhalter erstellt, um diesen Layout Shift zu verhindern:

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

Bonustipp: Bildattribute für das Seitenverhältnis

Sie können das Seitenverhältnis auch mithilfe von Bildattributen festlegen. Wenn Sie die Abmessungen des Bildes vorab kennen, empfiehlt es sich, das Bild Legen Sie diese Dimensionen als width und height fest.

Bei dem Beispiel oben mit den Abmessungen von 800 x 600 Pixel würde das Bild-Markup so aussehen: <img src="image.jpg" alt="..." width="800" height="600">. Wenn das gesendete Bild das gleiche Seitenverhältnis hat die nicht unbedingt genau diesen Pixelwerten entsprechen, Attributwerte zum Festlegen des Verhältnisses in Kombination mit dem Stil width: 100%, sodass dass das Bild den richtigen Platz einnimmt. Das Ganze würde dann so aussehen:

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
}

Letztendlich hat dies denselben Effekt, wie wenn Sie aspect-ratio auf der Bild über CSS und kumulative Layout Shifts vermieden (siehe Demo zu Codepen.

Fazit

Mit der neuen CSS-Eigenschaft aspect-ratio, die in mehreren modernen Browsern eingeführt wird, wird ein ordnungsgemäßes Die Seitenverhältnisse in Ihren Medien- und Layoutcontainern werden etwas übersichtlicher.

Fotos von Amy Shamblen und Lionel Gustave über Unsplash.