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 { position: relative;
width: 100%;
} selector::before { content: "";
display: block;
padding-top: 133.33%; /* 3:4 */
} Schritt 2 – Bild selbst anpassen
selector img { position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
} Unterschiedliche Formate
| Format | padding-top |
|---|---|
| 1:1 | 100% |
| 4:3 | 75% |
| 3:4 | 133.33% |
| 16:9 | 56.25% |
| 9:16 | 177.78% |
Ergebnis
- Einheitliches Seitenverhältnis
- Bild wird sauber beschnitten
- Kein Padding-Trick
- Kein absolut positioniertes Bild
- Kein Height- oder Flex-Bug
- Kein Reflow-Problem