Problem
Im Loop Grid haben Beitragsbilder oft unterschiedliche Dimensionen:
- verschiedene Seitenverhältnisse
- Hoch- und Querformat gemischt
- unruhige Grid-Höhen
- Layout springt beim Laden
Ziel
- Einheitliches Seitenverhältnis
- Keine absoluten Positionierungen
- Kein Height-Hack
- Kein Layout-Reflow
- Stabil auf allen Breakpoints
Lösung: CSS aspect-ratio
Das ist die sauberste Variante.
Schritt 1 – Bild-Container im Loop Template auswählen
Dem Container, der das Bild enthält, folgendes CSS geben:
selector { aspect-ratio: 5 / 3; /* Wunschverhältnis anpassen */ overflow: hidden; } Schritt 2 – Bild selbst anpassen
selector img { width: 100%; height: 100%; object-fit: cover; } Ergebnis
- Einheitliches Seitenverhältnis
- Bild wird sauber beschnitten
- Kein Padding-Trick
- Kein absolut positioniertes Bild
- Kein Height- oder Flex-Bug
- Kein Reflow-Problem