CSS-Kurs / Responsive Bilder und Videos: aspect-ratio und object-fit

Responsive Medien benötigen sowohl eine sinnvolle Elementgröße als auch eine bewusste Regel für die Anpassung ihres Inhalts. aspect-ratio hilft, die Proportionen einer Box festzulegen, während object-fit: cover oder contain bestimmt, ob ein Bild oder Video die Box ausfüllt oder entsprechend vollständig darin Platz findet.

Trennen von intrinsischen Dimensionen und Anzeigegröße

Wenn das Original 400×300 ist, beträgt das Verhältnis 4:3. Wenn die Anzeigebreite 288px beträgt und die gleichen Proportionen beibehalten werden, ist die Anzeigehöhe 216px. Die Breite und Höhe in HTML geben Informationen über die Größe und das Verhältnis des Bildes, und CSS steuert die Größe, die auf der Seite angezeigt wird. Anstatt das Problem zu lösen, indem die Größenangabe im HTML entfernt wird, überprüfen Sie, welcher Wert im CSS überschrieben wird.

img { max-width: 100%; height: auto; }
/* Instead of forcing the small original size to grow, it is reduced to fit the parent. */

max-width: 100% ist eine Obergrenze, die verhindert, dass es breiter wird als sein übergeordnetes Element, und erhöht nicht bedingungslos das kleine Original. width: 100% ist eine Spezifikation, die die Breite des Elternteils ausfüllt, sodass es über das Original hinaus vergrößert werden kann. Fotoqualität und Downloadgröße sind getrennte Themen. Sie können große Dateien herunterladen, selbst wenn sie mit CSS klein aussehen, und wenn Sie srcset · sizes verwenden, wählt der Browser ein Bild aus den Kandidaten aus, daher müssen Sie die Anzeigegröße auf dem Bildschirm und die tatsächlich ausgewählte Datei überprüfen.

Verwenden Sie aspect-ratio für die automatische Größenanpassung

aspect-ratio: 16 / 9 verwendet das Verhältnis von 16 Breite zu 9 Höhe, um die Größe zu berechnen. Wenn die Breite 288px beträgt, ist die Höhe 162px. Mindestens eine Größe muss automatisch sein, damit proportionale Berechnungen durchgeführt werden können, und wenn sowohl Breite als auch Höhe festgelegt sind, hat diese feste Größe Vorrang, auch wenn Sie diese Eigenschaft eingeben. Sie können auch die Bedingungen für die Berechnung der Seitenverhältnisse von MDN überprüfen.

.thumbnail { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.gallery { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }

Die Flexbox-Ausrichtung kann die Höhe direkt angeordneter Bilder beeinflussen. Um die Höhe automatisch zu berechnen, wenn Bilder mit unterschiedlichen Originalverhältnissen nebeneinander platziert werden, überprüfen Sie auch das übergeordnete align-items: flex-start oder das Element align-self. Wenn sich das Verhältnis nach der Änderung der Höhe auf auto gleich anfühlt, kann die Ausrichtungsregel des übergeordneten Elements die Ursache sein.

In der Praxis wird box-sizing einheitlich als border-box verwendet. Beim Hinzufügen von Rändern oder Innenabständen wird es wichtig, die Größe und Proportionen der Box zu messen. Die Bilder in den Vergleichsbeispielen unten haben keine Ränder oder Innenabstände, um Verwirrung zu vermeiden.

Vergleich des Anpassungs- und Zuschneideverhaltens

Das Einpassen eines 4:3-Bildes in eine 16:9-Box mit cover schneidet oben und unten ab. Die mittlere Positionierung teilt den Zuschnitt zwischen ihnen; object-position: center top bewahrt die obere Kante und schneidet mehr unten ab. Überprüfen Sie wichtige Randinhalte, bevor Sie einen Zuschnitt wählen. CSS-Hintergründe verwenden ähnliche Anpassungsoptionen, haben jedoch eine andere Inhalts- und Zugänglichkeitsrolle als HTML-Bilder. Siehe CSS-Hintergrundfarben und -bilder: cover und contain.

Die folgende schematische Darstellung zeigt dasselbe geometrische Übungsbild im Originalverhältnis, mit cover, contain und oben ausgerichtetem cover. Vergleichen Sie die grünen und roten Randbänder sowie den leeren Seitenraum. Der zentrale Kreis bleibt in diesen Beispielen sichtbar, sodass die Randbänder den Beschnitt leichter erkennbar machen. Das vollständige HTML-Beispiel unten ermöglicht es Ihnen, den Vergleich nachzustellen.

Führen Sie den Vier-Bilder-Vergleich aus

Speichern Sie es als image-ratio.html und öffnen Sie es. Das Originalbild ist als SVG-Daten innerhalb der Datei enthalten, daher wird kein externes Bild benötigt. Die Breiten- und Höheneigenschaften jedes Bildes behalten die ursprünglichen 400×300 Informationen bei und bestimmen die Bildschirmgröße und das Anzeigeverhältnis mit CSS.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>image-ratio.html</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 sans-serif; color: #243447; }
h1, h2, p { margin-top: 0; } a { color: #145f8f; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ac4100; outline-offset: 3px; }
main { width: min(100%, 65rem); margin-inline: auto; padding: 1rem; }
.gallery { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.sample { width: min(100%, 18rem); margin: 0; }
.sample img { display: block; width: 100%; height: auto; background: #e2e2e2; }
.sample p { margin: .5rem 0 0; } .cover, .contain { aspect-ratio: 16 / 9; }
.cover { object-fit: cover; } .contain { object-fit: contain; }
.top { object-position: center top; }
</style>
</head>
<body>
<main><h1>Compare the size and cropping of the same picture</h1><div class="gallery"><div class="sample"><img class="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23287699%22%2F%3E%3Crect%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%23205c32%22%2F%3E%3Crect%20y%3D%22265%22%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%239e3131%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23f6ae4c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%22358%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E" width="400" height="300" alt="Top green band, bottom red band and center orange circle"><p>Original 4:3</p></div>
<div class="sample"><img class="cover" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23287699%22%2F%3E%3Crect%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%23205c32%22%2F%3E%3Crect%20y%3D%22265%22%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%239e3131%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23f6ae4c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%22358%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E" width="400" height="300" alt="Top green band, bottom red band and center orange circle"><p>16:9 cover, center</p></div>
<div class="sample"><img class="contain" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23287699%22%2F%3E%3Crect%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%23205c32%22%2F%3E%3Crect%20y%3D%22265%22%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%239e3131%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23f6ae4c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%22358%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E" width="400" height="300" alt="Top green band, bottom red band and center orange circle"><p>16:9 contain</p></div>
<div class="sample"><img class="cover top" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23287699%22%2F%3E%3Crect%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%23205c32%22%2F%3E%3Crect%20y%3D%22265%22%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%239e3131%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23f6ae4c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%22358%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E" width="400" height="300" alt="Top green band, bottom red band and center orange circle"><p>16:9 cover, top</p></div>
</div></main>
</body>
</html>

1. Auf breiten Bildschirmen stellen Sie sicher, dass die Breite jedes Bildes auf 18rem begrenzt ist. Bei einer Grundschriftgröße von 16px beträgt die Breite 288px, die Originalhöhe 216px, und der verbleibende 16:9-Bereich ist 162px hoch.
2. Ändern Sie nur die Höhe von .sample img auf 300px. Selbst wenn das 16:9-Verhältnis angewendet wird, überprüfen Sie, dass der Bereich aufgrund der festen Höhe 288×300px beträgt, und setzen Sie ihn wieder auf auto zurück.
3. Ändern Sie nur die align-items von .gallery auf stretch. Stellen Sie sicher, dass die Höhe des Wrappers für dieselbe Zeile gleich ist, aber die Proportionen des Bildes im Wrapper beibehalten werden, und setzen Sie sie auf flex-start zurück. In diesem Beispiel ist das Flex-Element ein Beispiel-Wrapper, kein Bild. In Konfigurationen, in denen Bilder direkt als Flex-Elemente platziert werden, kann die automatische Höhe steigen, daher muss die Ausrichtung überprüft werden.
4. Ändern Sie nur object-position von .top auf center bottom. Dieses Mal stellen Sie sicher, dass das rote Band erhalten bleibt und das grüne Band abgeschnitten wird, und stellen Sie es dann wieder auf center top zurück.

SVG im Beispiel hat auch die Eigenschaft, die Proportionen der Formen beizubehalten. Wenn der Anzeigebereich eines Bildelements falsch ist und leeren Raum erzeugt, wird der Kreis nicht unbedingt verzerrt. Prüfen Sie statt nur der Form die Breite und Höhe des img-Elements in den Entwickler-Tools.

Größenanpassung von Videoinhalten innerhalb ihres Anzeigecontainers

In der Übung unten wird ein 400×300 Stummvideo, das für diese Lektion erstellt wurde, in einem 16:9-Bereich angezeigt. Das Video enthält keine Audio- oder Untertitelinformationen, nur die Bewegung des orangen Kreises, der verwendet wird, um die oberen, unteren und seitlichen Abstände sowie die Wiedergabeoperationen zu überprüfen. Die Adresse der WebM-Videodatei für die Übung ist im Beispiel enthalten. Für eine spätere Verwendung ohne Netzwerk laden Sie diese Datei vorab herunter und legen sie in denselben Ordner wie das HTML, wobei Sie die Quelladresse durch den Dateinamen ersetzen.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>video-ratio.html</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 sans-serif; color: #243447; }
h1, h2, p { margin-top: 0; } a { color: #145f8f; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ac4100; outline-offset: 3px; }
main { width: min(100%, 34rem); margin-inline: auto; padding: 1rem; }
video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #111; }
</style>
</head>
<body>
<main><h1>Video display ratio</h1>
<p id="video-description">This silent sample video shows an orange circle moving on a blue background. Play and pause it to compare aspect ratios.</p>
<video controls preload="metadata" width="400" height="300" aria-describedby="video-description">
  <source src="https://www.codingfactory.net/wp-content/uploads/css-media-ratio-motion-v1.webm" type="video/webm">
  <a href="https://www.codingfactory.net/wp-content/uploads/css-media-ratio-motion-v1.webm">Download the sample video</a>
</video></main>
</body>
</html>

Das controls-Attribut ermöglicht dem Benutzer die Verwendung von Browseroperationen wie Abspielen/Pause, und preload="metadata" ist ein Hinweis, dass Meta-Informationen vor der Wiedergabe gelesen werden sollen. Die tatsächliche Download-Methode wird von Ihrem Browser bestimmt. Da wir kein Autoplay eingeschlossen haben, drücken Sie die Wiedergabetaste, um zu bestätigen. Wenn Sie nur object-fit auf cover ändern, können Sie den Unterschied sehen, dass der Bereich gleich bleibt und die Inhalte oben und unten abgeschnitten werden. Nach der Bestätigung auf contain zurücksetzen.

object-fit passt den Inhalt bei ersetzten Elementen wie Bildern und Videos an. Es passt den Inhalt eines eingebetteten Video-iframes nicht auf die gleiche Weise an: Geben Sie dem iframe einen passend proportionierten Wrapper und legen Sie seine Größe darin fest. Anders als dieses stille dekorative Beispiel benötigt ein Video mit inhaltlich relevantem Ton geeignete Alternativen, wie Untertitel. Siehe MDN: object fit, MDN: video.