Warum «object-fit» allein nicht reicht, wo der Ausschnitt kippt, sobald ein Bereich seine Achse wechselt und wo die ehrlichen Grenzen dieser Behelfslösung liegen, liest du in diesem Beitrag.
Das Titelbild dieses Beitrags ist selbst ein gutes Beispiel dafür. Es lag nur im Hochformat vor, ich wollte es als Aufmacher, aber im Querformat. Weil es mein eigenes Bild ist – sogar mit mir als Model –, konnte ich die fehlenden Ränder links und rechts von einer KI, hier Adobe Firefly, ergänzen lassen, bis genug Material neben dem Motiv für ein 16:9-Bild da war.
Der Nebeneffekt dieser Erweiterung war ein Gewinn: Mir stand danach nicht nur ein 16:9-Bild zur Verfügung, sondern ein Master mit Luft auf allen Seiten – genug für weitere Formate.
Im Alltag des Webdesigns sieht es meist anders aus. Ein Bereich im Layout steht fest, das Seitenverhältnis ist Teil des Designs, und dann kommen die Bilder: eines im Hochformat, eines quadratisch, eines in irgendeiner Grösse, die zu nichts passt. Oft aus fremder Hand und – je nach System – ohne die Möglichkeit, sie neu zu erzeugen. Bei fremdem Material kommt dazu, dass man es oft gar nicht verändern darf: Wem ein Bild gehört und was eine KI-Erweiterung daran ändert, ist ein Thema für sich. Doch genau dann ist der reine CSS-Zuschnitt eine gute Behelfslösung.
Warum object-fit allein nicht reicht
Weil object-fit eine Box braucht, in die es hineinschneiden kann – und die muss zwei feste Dimensionen haben. Ohne definierte Breite und Höhe passiert gar nichts.
Das ist der Punkt, an dem die meisten Anleitungen zu diesem Thema landen: Sie zeigen object-fit: cover, geben dem Bild width: 400px und height: 300px mit und alles funktioniert. Im Beispiel. Sobald das Ganze responsive werden soll, steht man wieder am Anfang, weil feste Pixelwerte genau das sind, was man in einem flexiblen Layout nicht gebrauchen kann.
object-fit ist also nicht das Problem. Die festen Pixelwerte der Box sind es.
Fix ist das Seitenverhältnis, nicht die Grösse
Genau da setzt aspect-ratio an. Die Eigenschaft löst die Fixierung nicht auf, sie verschiebt sie: Fest ist nicht mehr die Grösse, sondern das Seitenverhältnis.
img {
width: 100%;
height: auto;
aspect-ratio: 21 / 9;
object-fit: cover;
}Die Breite kommt weiterhin aus dem Layout – aus der Grid-Spalte, aus dem Container, aus den 100 Prozent. Die Höhe wird daraus berechnet. Damit entsteht die feste Box, die object-fit zum Arbeiten braucht, ohne eine einzige Pixelangabe. Und weil die Breite flexibel bleibt, ist das Ganze überhaupt erst responsive tauglich.
Das height: auto ist dabei kein unwichtiger Punkt, sondern eine Absicherung. Steht in einem Theme-Reset noch eine konkrete Höhe auf dem Bild, gewinnt diese – und man sucht eine Weile, warum aspect-ratio scheinbar wirkungslos bleibt.
Übrigens: Vor
aspect-ratiogab es einenpadding-bottom-Hack: ein Wrapper mit prozentualem Innenabstand, darin wurde das Bild absolut positioniert. Das gleiche Prinzip, ein fixes Seitenverhältnis ohne Pixelwerte – nur mit einem Element mehr und einem wilden Wert vonpadding-bottom: 56.25%, der genau 9 geteilt durch 16 entspricht.
Etwas zusätzlich Positives an dieser Lösung: Weil der Platz für das Bild schon vor dem Laden der Quelle reserviert ist, springt beim Rendern nichts mehr. Das Layout steht, bevor das erste Byte des Bildes da ist.
Ist aspect-ratio inzwischen sicher einsetzbar?
Ja. aspect-ratio ist Baseline und in allen aktuellen Browsern breit verfügbar – der Stand bei caniuse zeigt das deutlich. object-fit ist ohnehin deutlich länger dabei.
Das ist erwähnenswert, weil die Kombination noch nicht so lange selbstverständlich ist. Wer sich das vor ein paar Jahren angeschaut und wieder verworfen hat, kann es heute ohne Vorbehalt einsetzen.
Wo cover hinschneidet
object-fit: cover füllt den Bereich, die definierte Box mit zum Beispiel 16:9, 4:5 oder anderen Werten, und zeigt nur einen Ausschnitt – der Rest des Bildes bleibt vorhanden, nur ausserhalb des sichtbaren Fensters.
Geschnitten wird dabei standardmässig aus der Mitte. Das ist eine sinnvolle Vorgabe und geht in der Praxis leider trotzdem oft schief, weil das Motiv selten genau mittig sitzt. Zur Hilfe bei der Positionierung kann man object-position setzen:
img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center center; /* horizontale Achse, vertikale Achse */
/* object-position: center 35%; 35% von oben, zentriert */
/* object-position: 50px center; 50px von links */
}Da es aber in der Praxis fast unmöglich ist, für jedes Bild die Positionierung festzulegen, liegt der zuverlässigere Hebel woanders – und zwar dort, wo man ihn selten sucht: nicht im CSS, sondern beim Bild selbst.
Genug Platz ums Motiv
Ein Bild überlebt fast jeden Zuschnitt, wenn das Motiv mittig platziert ist und ringsherum genug Platz hat. Dann ist es egal, ob cover oben, unten oder an den Seiten optisch wegschneidet – das Wesentliche bleibt drin. In den Beispielen sieht man das: Es ist nicht das Bild, das sich anpasst, sondern nur der Ausschnitt.
Für Bilder, die im Web funktionieren sollen, ist das aus meiner Sicht die wichtigste Regel überhaupt – und die, die beim Fotografieren am häufigsten vergessen wird. Wer den Bildausschnitt schon beim Auslösen endgültig festlegt, bekommt vielleicht das schönere Einzelbild, nimmt sich aber jede Flexibilität für später. Fürs Web fotografiert man besser etwas weiter, mit Platz ums Motiv, und schneidet danach bewusst zu.
Und dieses Zuschneiden findet in der Nachbearbeitung statt, nicht in der Kamera. Der Ausschnitt in camera kann technisch sauberer sein, weil die volle Auflösung genutzt wird – aber er ist eine endgültige Festlegung. Ein Stil, wenn man ihn bewusst wählt. Er wird zu einem Problem, wenn dasselbe Bild später in verschiedenen Formaten gebraucht wird.
Wenn der Bereich die Achse wechselt
Interessant wird es an dem Punkt, an dem das Seitenverhältnis nicht nur horizontal flacher wird, sondern vertikal ins Hochformat kippt.
Die naheliegende Anwendung ist eine Kette in derselben Richtung, und der Grund dafür ist die Höhe des Bildes. Ein Bereich über die volle Breite des Bildschirms wächst in beide Richtungen: Bei 16:9 ergeben 1920 Pixel Breite bereits 1080 Pixel Höhe, bei 2560 Pixeln sind es schon 1440 Pixel. Eine Vollbildgalerie in diesem Seitenverhältnis schiebt auf grossen Bildschirmen alles Weitere aus dem Blick.
Deshalb wird das Seitenverhältnis per Media Query flacher gehalten, je breiter der Bildschirm wird: 16:10 auf Tablets, 16:9 als Ausgangswert, 21:9 auf breiten Bildschirmen, 21:7 auf ganz breiten Bildschirmen. Der Platzbedarf bleibt damit unter Kontrolle, und das Motiv bleibt horizontal erhalten. Es wird nur flacher beschnitten.
aspect-ratio ist aber richtungsunabhängig. Ein 4 / 5 oder 3 / 4 definiert genauso einen Bereich im Hochformat, in den dann Querformat gezwungen wird. Und wenn ein Bereich mobil 4 / 5 ist und auf dem Desktop 16 / 9, wechselt er mitten in der Kette die Achse. Dasselbe Bild, zwei völlig verschiedene Ausschnitte.
Hinweis: Ein Klick auf die Bilder öffnet sie in der Lightbox – der Unterschied ist dort besser zu sehen.
Dass beide Ausschnitte funktionieren, ist kein Zufall: Nur weil das Motiv mittig sitzt und ringsherum Platz hat, trägt es sowohl das horizontale als auch das vertikale Format. Ein Motiv am linken Bildrand wäre im Hochformat halb verschwunden.
Das ist auch der Punkt, an dem die Dokumentation aufhört. Was aspect-ratio macht, steht bei MDN mit genügend Beispielen. Wie stark derselbe Ausschnitt kippt, wenn der Bereich seine Achse wechselt, sieht man meist erst am eigenen Material.
Die ehrlichen Grenzen
Diese Behelfslösung stellt sicher, dass Bilder im selben Format angezeigt werden, unabhängig davon, in welchem sie vorliegen. Am Bild selbst ändert sie nichts.
Der Ausschnitt kann inhaltlich unbrauchbar werden. Ein Porträt im Seitenverhältnis 3:4 zeigt in einem 21:9-Bereich noch etwa ein Drittel seiner Höhe. Technisch ist es sauber, aber inhaltlich oft ein Totalverlust – und an dem Punkt ist es kein CSS-Problem mehr, sondern eines der Bildauswahl. Kein object-position rettet ein Bild, das für diesen Bereich schlichtweg das falsche ist, und bei vielen Bildern in einem Bereich kannst du die Position ohnehin meist nur einmal setzen, nicht für jedes Bild einzeln.
Das Bild wird davon nicht besser. cover füllt den Bereich in jedem Fall – notfalls, indem es das Bild vergrössert. Wechselt der Bereich die Achse, kann eine Datei, die vorher von der Auflösung her ausgereicht hat, plötzlich unscharf oder verpixelt wirken. Sichtbar wird das erst im Browser, und beheben lässt es sich nur mit einem besser aufgelösten Bild.
Gespart wird dabei nichts. Der Browser lädt die Datei vollständig, auch wenn am Ende nur ein Ausschnitt davon zu sehen ist. object-fit greift erst bei der Darstellung und beeinflusst weder das Laden noch die Dateigrösse noch die Renderleistung – ein Tutorial von DigitalOcean hält das ausdrücklich fest. In Sachen Performance gewinnt man damit nichts, im Gegenteil: Weil im Bereich jedes Bild passabel aussieht, fällt eine zu grosse Datei nicht mehr auf – darauf muss man selbst achten.
Kannst du das Bild bestimmen, bestimmst du das Bild. Der CSS-Zuschnitt ist für den Fall gedacht, in dem genau das nicht geht.
Und in WordPress?
WordPress ist eigentlich nicht der Fall, für den dieser Beitrag geschrieben ist. Dort hat man alles zur Hand: In der Mediathek lässt sich jedes Bild direkt zuschneiden, skalieren und drehen, ohne externes Programm. add_image_size() mit aktiviertem Zuschnitt erzeugt beim Upload echte Bildgrössen im gewünschten Seitenverhältnis. Und im Bild-Block kann man seit Version 6.3 Seitenverhältnis und Skalierung anklicken.
Der letzte Punkt ist der interessante. WordPress schreibt dabei nämlich genau das ins Markup, worum es hier die ganze Zeit geht: style="aspect-ratio:3/4;object-fit:cover" direkt am Bild. Die Technik ist also nichts Exotisches, sie steckt längst im Editor – nur wird sie dort pro Bild gesetzt, von Hand, für jedes einzeln.
In der Verwaltung wird genau das allerdings zum Alptraum: Ändert sich das Theme, oder will man einen Bereich einfach via Theme-CSS ändern, geht das nicht mehr – der Inline-Style direkt am Bild schlägt es jedes Mal. Man müsste jedes Bild davon befreien.
Besser ist es, im Theme einmal für einen Bereich ein Seitenverhältnis zu setzen, und es gilt für alles, was dort landet. Das ist der Unterschied zur manuellen Definition, und deshalb setze ich es auch in meinem Theme ein: im Kopfbereich eines Beitrags zum Beispiel, als Absicherung und Helfer. Denn der Bereich hält sein Seitenverhältnis, unabhängig davon, was für ein Bild dahinterliegt.
Das alles ersetzt die Vorarbeit zu den Bildern nicht. Ich kümmere mich weiterhin vorweg um das Format der Bilder – die CSS-Regel hilft bei der Darstellung.
Fazit
Der Kern ist, dass diese Behelfslösung einen Bereich mit einem festen Seitenverhältnis festlegt, nicht in Pixeln. Was danach an Bildmaterial kommt, ändert am Layout nichts mehr: Das Bild fügt sich ein, und der Bereich steht schon, bevor es geladen ist.
Den grösseren Teil der Arbeit muss man trotzdem vorher erledigen, beim Fotografieren und beim Auswählen. Ein Motiv mit Platz ringsherum funktioniert in fast jedem Format. Eines, das schon in der Datei bis an den Rand beschnitten ist, leider nicht.
Zugeschnitten wird am Ende durchaus – aber nur optisch im Browser statt in der Datei. Das Original bleibt, wie es ist, und wenn sich das Design ändert, ändern sich Regeln im CSS statt eines Stapels neu exportierter Bilder.
Eine Behelfslösung bleibt es. Eine, die alles im Bereich hält.
Kommentare