GeneratePress: Bilder unabhängig vom Originalformat quadratisch zuschneiden

In einem Grid oder Kartenlayout wirken Bilder schnell unruhig, wenn einige im Hochformat, andere im Querformat und wieder andere fast quadratisch hochgeladen wurden. Genau dieses Problem war Ausgangspunkt des ursprünglichen Gemini-Chats: Wie kann ich Bilder in einem GeneratePress-/GenerateBlocks-Container immer quadratisch darstellen, obwohl die Originalbilder unterschiedliche Formate haben?

Die saubere Lösung besteht nicht darin, jedes Bild vorher manuell auf 1:1 zuzuschneiden. Stattdessen bekommt der Bildbereich im Frontend ein festes Seitenverhältnis und das eigentliche Bild wird mit object-fit: cover hineingepasst. Dadurch bleiben die Originaldateien unangetastet und alle Karten sehen trotzdem einheitlich aus.

Die Grundidee: Container quadratisch, Bild flexibel

Zwei CSS-Eigenschaften erledigen den größten Teil der Arbeit:

  • aspect-ratio: 1 / 1 zwingt den sichtbaren Bereich in ein quadratisches Verhältnis.
  • object-fit: cover sorgt dafür, dass das Bild den gesamten Bereich füllt, ohne verzerrt zu werden.

Ein 16:9-Foto bleibt also proportional, wird aber links und rechts etwas beschnitten. Ein hohes Portrait wird oben und unten beschnitten. Das Ergebnis ist in beiden Fällen ein Quadrat.

Variante 1: CSS-Klasse auf einen Bild-Container setzen

Diese Methode eignet sich besonders gut, wenn du dieselbe Darstellung an mehreren Stellen wiederverwenden möchtest.

.quadratisches-bild-container {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.quadratisches-bild-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

In GenerateBlocks weist du dem Container, in dem das Bild liegt, unter den erweiterten Block-Einstellungen die CSS-Klasse quadratisches-bild-container zu.

Warum overflow: hidden wichtig ist

Der Browser muss beim Zuschneiden Teile des Bildes außerhalb des quadratischen Rahmens ausblenden. Genau dafür sorgt overflow: hidden. Ohne diese Angabe kann das Bild zwar auf die passende Größe gebracht werden, überstehende Bereiche können aber sichtbar bleiben.

Warum width und height beide 100 Prozent sein sollten

Im ursprünglichen Chat trat anschließend ein zweites Problem auf: Ein Bild war kleiner als die anderen. Wenn der Browser nur die Breite auf 100 Prozent setzt, aber die Höhe des Bildes weiterhin automatisch aus dem Original-Seitenverhältnis berechnet wird, füllt es den quadratischen Rahmen nicht zwingend vollständig aus.

Darum gehören bei der Cover-Variante beide Angaben zusammen:

width: 100%;
height: 100%;
object-fit: cover;

Das Bild füllt damit den verfügbaren Bereich. object-fit: cover verhindert zugleich, dass es in die Breite oder Höhe verzerrt wird.

Wenn das Motiv an der falschen Stelle abgeschnitten wird

Standardmäßig verwenden wir:

object-position: center;

Das Motiv wird also von der Mitte aus beschnitten. Bei Portraits kann das ungünstig sein, wenn sich ein Gesicht weit oben im Bild befindet. Dann lässt sich der sichtbare Ausschnitt verschieben.

object-position: center 25%;

Oder bei einem Motiv am linken Rand:

object-position: left center;

So kann ein einzelnes Bild individuell korrigiert werden, ohne die quadratische Grundstruktur zu verändern.

Variante 2: kleines Bild nicht künstlich vergrößern

Der ursprüngliche Chat behandelte auch den Sonderfall, dass ein Ausgangsbild deutlich kleiner als der vorgesehene Bildbereich ist. Technisch kann der Browser ein kleines Bild vergrößern. Das führt aber möglicherweise zu sichtbarer Unschärfe oder Pixelbildung.

Wenn du ein kleines Logo, Icon oder historisches Bild bewusst nicht hochskalieren möchtest, ist contain die bessere Alternative:

.quadratisches-bild-contain {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quadratisches-bild-contain img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

Der Unterschied ist wichtig: cover füllt den gesamten Rahmen und schneidet bei Bedarf ab. contain zeigt das komplette Bild und nimmt dafür freie Flächen im Rahmen in Kauf.

Cover oder contain – was ist besser?

Für klassische Karten, Teamfotos, Beitragsbilder oder Produktkacheln würde ich fast immer cover verwenden. Bei Logos, Dokumentabbildungen, Screenshots oder Bildern, bei denen kein Teil abgeschnitten werden darf, ist contain oft sinnvoller.

Warum die Originalbilder nicht quadratisch sein müssen

Das war im Chat eine wichtige Rückfrage: „Die Bilder sind nicht quadratisch.“ Genau das ist kein Problem. Der Trick besteht gerade darin, dass nicht die Datei selbst, sondern der sichtbare Rahmen quadratisch wird.

Ein Querformat bleibt als Datei ein Querformat. WordPress speichert es weiterhin so in der Mediathek. Nur bei der Ausgabe im betreffenden Container wird ein quadratischer Ausschnitt gezeigt.

Mehrere Bilder in einem GenerateBlocks-Grid

Wenn du beispielsweise drei Karten nebeneinander hast, sollte jede Karte dieselbe Struktur besitzen:

  1. äußerer Karten-Container
  2. quadratischer Bild-Container
  3. Bild
  4. Überschrift
  5. Text oder Button

Dadurch bleibt nicht nur das Bildformat, sondern auch der restliche Aufbau sauber kontrollierbar. Unterschiedlich lange Texte beeinflussen dann nicht mehr die Bildhöhe.

Responsives Verhalten

aspect-ratio: 1 / 1 funktioniert auch responsiv. Wenn eine Grid-Spalte auf dem Desktop 350 Pixel breit ist, ist der Bildbereich 350 × 350 Pixel. Wird dieselbe Karte auf dem Smartphone nur noch 280 Pixel breit, wird daraus automatisch 280 × 280 Pixel. Zusätzliche feste Höhen für Desktop, Tablet und Mobil sind normalerweise nicht notwendig.

Runde Ecken ergänzen

Wenn deine Karten abgerundete Bilder verwenden, gehört der Radius am besten auf den Container:

.quadratisches-bild-container {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 14px;
}

Weil der Container gleichzeitig overflow: hidden verwendet, wird auch das Bild sauber innerhalb der Rundung abgeschnitten.

Typische Fehler bei quadratischen Bildern

  • Nur width: 100% gesetzt: Das Bild behält seine automatische Höhe und bleibt rechteckig.
  • object-fit fehlt: Bei fester Breite und Höhe kann das Bild verzerrt werden.
  • Die CSS-Klasse sitzt am falschen Block: Die Klasse muss den Bereich erfassen, der das Bild tatsächlich begrenzt.
  • Ein anderes CSS überschreibt height: Im Browser-Inspektor prüfen, ob für das Bild später wieder height: auto gesetzt wird.
  • Das Quellbild ist sehr klein: Cover funktioniert zwar technisch, aber die Vergrößerung kann unscharf werden.
  • Wichtiger Bildinhalt wird abgeschnitten: object-position anpassen oder für dieses Bild contain verwenden.

Wann ich lieber direkt die Bilddatei zuschneiden würde

CSS ist ideal, wenn viele unterschiedliche Bilder automatisch in dasselbe Layout passen sollen. Für besonders wichtige Hero-Bilder oder Motive mit genau definierter Komposition kann es trotzdem besser sein, zusätzlich eine passend zugeschnittene Bilddatei zu erstellen. Dann entscheidest du selbst, welcher Bereich sichtbar bleibt.

Fazit

Die zuverlässigste Lösung für einheitliche quadratische Bilder in GeneratePress und GenerateBlocks ist ein quadratischer Container mit aspect-ratio: 1 / 1 und ein darin liegendes Bild mit width: 100%, height: 100% und object-fit: cover. Die Originalbilder dürfen dabei völlig unterschiedliche Formate haben. Für kleine Bilder oder Motive, die vollständig sichtbar bleiben müssen, ist object-fit: contain die bessere Alternative.