Portfolio·Guide
Die Layout-Falle: Aspect Ratios und CSS-Grids
Sie haben keinen mysteriösen Cropping-Fehler. Ein Seitenverhältnis-Problem trifft auf ein Packing-Problem. Unterschiedliche Formate wie 3:2, 4:5, 16:9 und quadratische Bilder treffen auf Grids, die Einheitlichkeit voraussetzen. Das gewählte Layout entscheidet, was beschnitten wird, was intakt bleibt und was bei 375 px noch funktioniert.
Layout-Familien
Die Kompromisse nach Layout
Cropped Grid
Erzwingt ein einheitliches Seitenverhältnis (durchgehend 1:1 oder 4:5). Klar und schnell erfassbar für Kunden, die Inhalte überfliegen. Sie entscheiden, was vom Bildausschnitt einer anderen Person abgeschnitten wird – und auf Mobilgeräten fällt dieser Beschnitt oft stärker aus, als die Desktop-Vorschau vermuten ließ.
Masonry
Bewahrt das ursprüngliche Seitenverhältnis jedes Bildes in ungleichmäßigen Spalten (ein Flow im Pinterest-Stil). Ideal, wenn die Bildkomposition erhalten bleiben muss: Street, Dokumentar- und Landschaftsfotografie. Nicht mit Justified gleichzusetzen: Die Spalten wachsen unabhängig voneinander, die Zeilen haben keine gemeinsame Höhe.
Justified
Bewahrt ebenfalls die ursprünglichen Seitenverhältnisse, ordnet jedoch zeilenweise an: gemeinsame Zeilenhöhe, flexible Breiten, damit die Zeile den Container ausfüllt. Echte Zeilenberechnung anhand gespeicherter Breite und Höhe – kein CSS-„Masonry“-Skin unter anderem Namen.
Bento (Seiten)
Ein Hierarchie-Block im Page Builder mit bewusst unterschiedlichen Kachelgrößen, sodass wenige Hero-Elemente dominieren. Erfüllt eine andere Aufgabe als die Galerie-Modi eines Portfolios. Funktioniert nicht, wenn jedes Bild das Hero-Element sein soll.
Der grundlegende Zielkonflikt
Template-Marktplätze führen Masonry, Bento und Justified oft als gleichwertige Stilmerkmale auf. Das sind sie nicht. Masonry und Justified bewahren beide die ursprünglichen Seitenverhältnisse, ordnen sie aber unterschiedlich an. Bento gehört üblicherweise auf eine gestaltete Seite und ist kein Galerie-Skin, der sich auf ein komplettes Portfolio anwenden lässt.
In Foren finden sich zahlreiche Versuche, das Cropping-Verhalten einer Plattform mit individuellem CSS zu bekämpfen. Meist setzt dieser Aufwand an der falschen Ebene an. Benennen Sie zuerst die gewünschte Layout-Familie und prüfen Sie dann, ob die Engine ursprüngliche Seitenverhältnisse respektiert oder einen Beschnitt erzwingen muss.
Wie das Grid tatsächlich entscheidet
Im Hintergrund kommen häufig zwei Ansätze zum Einsatz. CSS Grid mit einem expliziten aspect-ratio (und manchmal grid-auto-flow: dense) bindet Kacheln an eine gemeinsame Geometrie: Der Browser kennt die Box, bevor das Bild gerendert wird. Deshalb wirken Cropped Grids stabil und „falsche“ Bildausschnitte eher beabsichtigt als zufällig.
Flex-basierte Justified Layouts erfüllen die gegenteilige Aufgabe: Sie messen die intrinsischen Seitenverhältnisse der Bilder und berechnen dann eine gemeinsame Zeilenhöhe, damit die Zeile die Containerbreite ohne große Lücken ausfüllt. Masonry lässt die Spaltenhöhen dagegen frei. Deshalb kann eine Street-Serie ihre Bildausschnitte bewahren – und deshalb wird eine Desktop-Demo mit vier Spalten auf einem Smartphone oft zu einer einzigen unbeholfenen Spalte, wenn die Breakpoints nie durchdacht wurden.
Sie müssen das CSS nicht selbst ausliefern. Sie benötigen jedoch eine Plattform, deren Portfolio-Engine klar ausweist, welches Modell verwendet wird – statt eines Themes, das auf dem Desktop beschneidet und sich mobil unvorhersehbar neu anordnet.
Was bei 375 px nicht mehr funktioniert
Ein vierspaltiges Masonry, das auf dem Marketing-Laptop redaktionell wirkt, wird auf dem Smartphone häufig zu einem langen vertikalen Stapel. Das kann funktionieren, wenn Abstände, Beschriftungsdichte und Touch-Ziele dafür gestaltet wurden. Die meisten Template-Demos verbergen das Problem, indem sie die Smartphone-Ansicht gar nicht zeigen.
Cropped Grids überstehen die Verkleinerung meist besser und bleiben schnell erfassbar, doch das Beschnittfenster verändert sich: Ein auf dem Desktop sicherer Porträtausschnitt kann Augen oder Produktränder verlieren, wenn dasselbe Seitenverhältnis in einer schmaleren Spalte erscheint. Prüfen Sie die Layout-Familie in Smartphone-Breite, bevor Sie eine öffentliche Serie darauf festlegen.
Immersive Layouts (Split Stage, Book, Carousel) und chronologische Modelle (Timeline, Journal) ordnen sich nochmals anders an (Stage über Rail, höhenbegrenztes Hochformatvideo im Journal). „Das Grid stapeln“ ist daher nicht die einzige mobile Lösung.
Genre → Layout-Familie
Die Begründung hinter der Empfehlung ist wichtiger als die Bezeichnung. Anordnungen mit erhaltenen Seitenverhältnissen eignen sich für Arbeiten, bei denen der Bildausschnitt entscheidend ist. Einheitliche Zuschnitte eignen sich, wenn Vergleichbarkeit und Geschwindigkeit zählen. Page-Bentos und Full-Bleed-Heroes passen zu Arbeiten, bei denen wenige Bilder führen sollen.
| Fotografischer Schwerpunkt | Empfehlung | Warum |
|---|---|---|
| Street / Dokumentar / Landschaft | Masonry oder Justified | Die Integrität der Komposition ist wichtiger als gleich große Kacheln; gemischte Seitenverhältnisse prägen die Serie |
| Editorial / Fine-Art-Heroes | Page-Bento oder Full-Bleed + unterstützender Streifen | Hierarchie: Wenige Bilder sollen die unterstützenden Aufnahmen dominieren |
| Produkt / Katalog / Lookbook | Cropped Grid (gemeinsames Seitenverhältnis) | Schnelle Erfassbarkeit und Vergleichbarkeit ähnlicher Objekte |
| Hochzeit / Event-Highlights | Justified oder leichtes Masonry | Gemischte Ausrichtungen eines Tages; vermeiden Sie aggressive Gesichtsausschnitte in einer öffentlichen Auswahl |
| Gemischte Fotos + Video | Grid mit gemeinsamem Seitenverhältnis oder Poster passend zur Bildgeometrie | Posterframes müssen dieselbe Geometrie wie Fotos verwenden (siehe Video-first-Leitfaden) |
Wo ArtInStack die Grenze zieht
Die Portfolio-Layouts von ArtInStack sind Präsentationsfamilien, die Sie bewusst wählen: Square Grid, Masonry und Justified auf öffentlichen Portfolio-Seiten sowie immersive und chronologische Browse-Modelle, wenn die Serie eine andere Leserichtung benötigt. Page-Editor-Bento ist für eine gestaltete Hierarchie auf einer Site-Seite vorgesehen, nicht als dritter Galerie-Skin für dieselbe Aufgabe.
Ein praktischer Hinweis: Justified auf einer öffentlichen `/portfolio`-Seite entspricht nicht jedem Seiten-Embed. Image-Portfolio-Embeds bilden Justified derzeit auf ein einheitliches Grid ab. Prüfen Sie daher genau die Oberfläche, die Sie tatsächlich veröffentlichen.
Kombinieren Sie dies mit Ihren Auslieferungsentscheidungen: Wie scharf und datenintensiv jede Kachel ist, erfahren Sie unter Auflösung vs. Performance für Portfolio-Bilder. Wenn Bewegtbild die Seite anführt, lesen Sie Video-first Portfolio-Präsentation.
Wählen Sie die Layout-Familie bewusst
Kämpfen Sie nicht länger gegen Cropping-CSS. Wählen Sie Cropped, Masonry oder Justified für die Galerie und Bento, wenn die Seite Hierarchie benötigt. Überlassen Sie es anschließend der Portfolio-Engine, die mobile Darstellung konsistent zu halten.
Also in Guides: Öffentliche vs. private Arbeit · Auflösung vs. Performance für Portfolio-Bilder · Video-first Portfolio-Präsentation