Galeriefotos in Divi angleichen – einheitliche Bildhöhen per CSS
Unterschiedliche Bildformate sorgen in Divi-Galerien schnell für ein unruhiges Layout.
Mit einer einfachen CSS-Lösung lassen sich Galeriefotos angleichen, sodass alle Bilder die gleiche Höhe haben und sauber dargestellt werden – unabhängig vom ursprünglichen Seitenverhältnis.
Das Problem mit unterschiedlich großen Galeriebildern
In der Praxis haben Bilder oft verschiedene Formate:
-
Hochformat
-
Querformat
-
quadratisch
Wird eine Galerie damit ungefiltert befüllt, entstehen:
-
ungleichmäßige Höhen
-
springende Bildraster
-
ein insgesamt unprofessioneller Eindruck
Gerade bei Kundenwebsites ist das gestalterisch meist nicht gewünscht.
Ziel: Einheitliche Optik ohne Bildbearbeitung
Natürlich könnte man alle Bilder vorab zuschneiden –
in der Realität ist das aber:
-
zeitaufwendig
-
fehleranfällig
-
bei nachträglichen Änderungen unpraktisch
Eleganter ist eine CSS-basierte Lösung, die direkt im Frontend greift.
Lösung: Galeriebilder per CSS angleichen
Mit CSS lassen sich die Bilder so steuern, dass:
-
alle Galeriebilder die gleiche Höhe haben
-
das Bild proportional skaliert wird
-
überstehende Bereiche sauber abgeschnitten werden
CSS-Code zum Angleichen der Galeriefotos
Erklärung der CSS-Eigenschaften
-
height: 250px;
Legt eine feste Höhe für alle Galeriebilder fest
→ Wert je nach Design anpassen -
object-fit: cover;
Sorgt dafür, dass das Bild die Fläche vollständig ausfüllt
→ kein Verzerren, sondern proportionaler Zuschnitt
Das Ergebnis ist eine ruhige, gleichmäßige Galerie, unabhängig vom Originalformat der Bilder.
Alternative: Andere Höhen oder responsive Anpassung
Die Höhe kann problemlos angepasst werden, z. B.:
Oder mit Media Queries für kleinere Bildschirme:
Wo wird der CSS-Code eingefügt?
Je nach Einsatzzweck gibt es mehrere Möglichkeiten:
-
Customizer → Zusätzliches CSS
(empfohlen für globale Galerien) -
Divi Theme Options → Custom CSS
-
Code-Modul in Divi
(wenn die Regel nur auf einer bestimmten Seite gelten soll) -
Child-Theme, bei dauerhaften Projekten
Hinweis zu Divi 4 und Divi 5
Diese CSS-Lösung funktioniert sowohl mit Divi 4 als auch mit Divi 5, da sich die grundlegende Galerie-Struktur nicht geändert hat.
Gerade bei bestehenden Websites ist dies eine schnelle Möglichkeit, Galerien optisch aufzuwerten, ohne Inhalte neu anzulegen.
Fazit
Unterschiedliche Bildformate müssen kein Designproblem sein.
Mit wenigen Zeilen CSS lassen sich Galeriefotos in Divi sauber angleichen und professionell darstellen – flexibel, schnell und jederzeit anpassbar.
Wenn Sie Unterstützung bei individuellen Divi-Anpassungen oder bei der Optimierung Ihrer Website benötigen, helfe ich Ihnen gerne weiter.