CSS aspect-ratio und object-fit, mit Fokuspunkt-Auswahl
Guide zu CSS aspect-ratio und object-fit
CSS aspect-ratio und object-fit: Live-Demos und Tailwind | We.Inc
Fixiere Boxen mit aspect-ratio auf ein Seitenverhältnis und passe Fotos dann mit object-fit cover, contain, fill, none oder scale-down ein. Setze per Klick einen Fokuspunkt mit object-position.
Zwei Eigenschaften lösen die meisten Probleme mit Bildgrößen. aspect-ratio: 16 / 9 sorgt dafür, dass eine Box bei jeder Breite diese Form behält, und ersetzt den alten padding-top-Hack. object-fit legt fest, wie ein img oder video die Box füllt: cover schneidet zu, contain fügt Balken hinzu, fill streckt. object-position bestimmt, welcher Teil sichtbar bleibt, wenn cover zuschneidet.
Kurzreferenz
Ziel
CSS
Tailwind
Quadratische Box
aspect-ratio: 1
Videoformat
aspect-ratio: 16 / 9
Beliebiges Verhältnis
aspect-ratio: 4 / 3
aspect-4/3 oder aspect-[4/3]
Füllen und zuschneiden
object-fit: cover
Alles zeigen
object-fit: contain
Oberen Teil behalten
object-position: top
Unten liegt ein Testbild in einer Box, deren Form du ändern kannst. Wechsle zwischen den fünf object-fit-Werten, klicke auf das Bild, um den Fokuspunkt zu verschieben, und kopiere das CSS oder die Tailwind-Klassen. Weiter unten: der Padding-Hack neben aspect-ratio, responsive Video-Einbettungen und Kartenraster mit gleichmäßigen Vorschaubildern.
Wähle ein Seitenverhältnis für die Box und einen object-fit-Wert. Die Vorschau zeigt genau, was der Browser zuschneidet oder streckt.
Wenn cover oder none ausgewählt ist, klicke irgendwo auf das Testbild, um object-position auf diesen Punkt zu setzen.
Kopiere das erzeugte CSS oder die Tailwind-Klassen, die dasselbe bewirken.
Nutze die Rezepte für Kartenraster und Videos unten, wenn du echte Layouts baust.
Gib img-Tags immer width- und height-Attribute. Browser machen daraus ein Seitenverhältnis, bevor die Datei lädt, sodass das Layout nicht springt.
Wähle cover für Vorschaubilder und Hero-Fotos, contain für Logos und Produktfotos, bei denen nichts abgeschnitten werden darf.
Wenn ein Gesicht immer wieder weggeschnitten wird, verschiebe object-position in seine Richtung, statt die Bilddatei neu zuzuschneiden.
aspect-ratio ist eine bevorzugte Form, kein Käfig. Langer Text in der Box macht sie höher, außer du setzt min-height: 0 oder overflow.
Häufige Fragen
Was ist der Unterschied zwischen aspect-ratio und object-fit?
aspect-ratio formt die Box selbst, bei jedem Element. object-fit gilt nur für ersetzte Inhalte wie img, video und canvas und legt fest, wie dieser Inhalt in seiner Box gezeichnet wird. Meist nutzt du beides: aspect-ratio auf dem Bild, um seine Form festzulegen, und object-fit: cover, damit das Bild sie ausfüllt.
Warum bewirkt object-fit nichts?
Die Bildbox hat dasselbe Seitenverhältnis wie das Bild, also gibt es nichts zuzuschneiden oder zu strecken. object-fit zeigt erst dann einen Unterschied, wenn die Box eine andere Form hat, zum Beispiel eine feste Höhe plus width: 100% oder ein aspect-ratio, das von der Datei abweicht.
Brauche ich den padding-top-Hack noch?
Nicht für aktuelle Browser. aspect-ratio funktioniert seit 2021 in Chrome, Edge, Firefox und Safari. Behalte den Hack nur, wenn du ältere Browser unterstützen musst, und prüfe caniuse für dein Publikum.
Funktioniert object-fit bei Hintergrundbildern?
Nein. Für CSS-Hintergründe sind die Entsprechungen background-size: cover oder contain und background-position für den Fokuspunkt. object-fit ist für echte img- und video-Elemente gedacht, die sich für inhaltliche Bilder besser eignen, weil sie Alt-Text tragen und srcset unterstützen.
Kann man aspect-ratio auf einem div verwenden?
Ja. Jedes Element kann es nutzen. Ein div mit width: 100% und aspect-ratio: 1 wird zu einem Quadrat, das mit seiner Spalte wächst. Das ist praktisch für Karten-Platzhalter, Avatare und Skeleton-Loader.
Wie der Browser aspect-ratio auflöst
Das Seitenverhältnis greift nur, wenn eine Dimension automatisch ist. Setzt du eine Breite und lässt die Höhe auf auto, berechnet der Browser die Höhe aus dem Verhältnis. Setzt du Breite und Höhe, wird das Verhältnis ignoriert, da nichts mehr zu berechnen bleibt.
Der Wert auto 3 / 2 bedeutet: Nutze das natürliche Verhältnis des Elements, wenn es eines hat, etwa bei einem geladenen Bild, und falle auf 3 / 2 zurück, bevor es lädt oder wenn es keines hat. Genau so verhalten sich width- und height-Attribute auf img im Hintergrund.
Einen Fokuspunkt wählen
object-position nimmt dieselben Werte wie background-position: Schlüsselwörter wie top oder right, Prozentwerte oder Längen. 50% 50% ist der Standard und behält die Mitte. Ein Prozentwert richtet diesen Punkt des Bildes am selben Punkt der Box aus. 30% 40% behält also den Bereich ein Drittel von links und etwas oberhalb der Mitte.
Speichere in einem Content-System den Fokuspunkt pro Bild als zwei Prozentwerte und schreibe ihn in einen Inline-Style. Dann bleibt das Motiv bei jedem Zuschnitt auf der Website im Bild, egal welches Seitenverhältnis das Layout verwendet.
aspect-ratio neben dem Padding-Hack
Vor aspect-ratio bekam eine Box ihre Form über padding-top als Prozentwert, weil vertikale Padding-Prozente an der Breite gemessen werden. Das funktioniert, aber der Inhalt muss darin absolut positioniert werden. Beide Boxen unten sind 16:9.
Alt und neu, gleiches Ergebnis
56.25% ist 9 geteilt durch 16. Die moderne Version braucht eine Zeile und lässt den Inhalt normal fließen.
Alle fünf object-fit-Werte am selben Foto
Das Bild ist 3:2 und jede Box quadratisch. So muss jeder Wert mit einer Abweichung umgehen, und die Unterschiede werden deutlich.
object-fit-Werte
Wert
Was passiert
Tailwind
Streckt das Bild auf die Box. Der Standard für img und video. Verzerrt, wenn die Verhältnisse abweichen.
Skaliert das ganze Bild so, dass es in die Box passt. Lässt leere Streifen (Letterboxing), wenn die Verhältnisse abweichen.
Skaliert das Bild so, dass es die Box füllt, und schneidet den Überstand ab. Keine Verzerrung, keine Streifen, ein Teil des Bildes fällt weg.
Behält das Bild in seiner natürlichen Größe und schneidet ab, was nicht passt. Gut, um ein Detail in 1:1 zu zeigen.
Verhält sich wie none oder contain, je nachdem, was das kleinere Ergebnis liefert. Vergrößert nie ein kleines Bild.
fill, contain, cover, none, scale-down
Dasselbe Bild mit 300 mal 200 in fünf Quadraten mit 110 Pixeln. Achte auf den roten Punkt: Er ist das Motiv, das cover nicht verlieren darf.
Responsive Videos und Einbettungen
Ein iframe im YouTube-Stil, das 16:9 behält
Gib dem iframe width 100% und ein aspect-ratio. Kein Wrapper-div und keine absolute Positionierung nötig.
Kartenraster mit gleichmäßigen Vorschaubildern
Jedes Vorschaubild in derselben Form
Uploads kommen in allen Formen. aspect-ratio plus object-fit: cover macht das Raster ordentlich, ohne eine einzige Datei zu bearbeiten.
Tailwind-Klassen für Verhältnis und Einpassung
Tailwind-v4-Utilities (prüfe die v3-Doku, wenn du eine ältere Version nutzt)
CSS
Tailwind
aspect-ratio: 1 / 1
aspect-ratio: 16 / 9
aspect-ratio: auto
aspect-ratio: 3 / 2
aspect-3/2 (v4) oder aspect-[3/2]
object-fit: cover / contain / fill
object-cover / object-contain / object-fill
object-fit: none / scale-down
object-none / object-scale-down
object-position: center / top / bottom
object-center / object-top / object-bottom
object-position: 30% 40%
object-[30%_40%]
Streckt das Bild auf die Box. Der Standard für img und video. Verzerrt, wenn die Verhältnisse abweichen.
Skaliert das ganze Bild so, dass es in die Box passt. Lässt leere Streifen (Letterboxing), wenn die Verhältnisse abweichen.
Skaliert das Bild so, dass es die Box füllt, und schneidet den Überstand ab. Keine Verzerrung, keine Streifen, ein Teil des Bildes fällt weg.
Behält das Bild in seiner natürlichen Größe und schneidet ab, was nicht passt. Gut, um ein Detail in 1:1 zu zeigen.
Verhält sich wie none oder contain, je nachdem, was das kleinere Ergebnis liefert. Vergrößert nie ein kleines Bild.
Spielwiese für Verhältnis, Einpassung und Fokuspunkt
Quellbild (3:2). Klicke darauf oder fokussiere es und nutze die Pfeiltasten, um den Fokuspunkt zu setzen.
Fokuspunkt setzen, aktuell {pos}
Testlandschaft mit einem roten Punkt als Motiv
Auf Mitte zurücksetzen
Ergebnis in einer {ratio}-Box mit object-fit: {fit}
Seitenverhältnis der Box
Der Fokuspunkt zählt vor allem bei cover und none. Bei contain oder scale-down bestimmt er, wo die leeren Streifen liegen.
CSS kopieren
Klassen kopieren
Du brauchst die exakte Pixelgröße für ein Verhältnis? Nutze den