Eine einheitliche Größe für die Vorschaubilder deiner Galerie festlegen
Du möchtest, dass alle Vorschaubilder deiner Galerie gleich groß dargestellt werden?
Hier zeige ich dir, wie du das passende Format festlegen kannst.
Öffne die Einstellungen des Galerie-Moduls
Im Tab „Erweitert“ vergebe eine CSS-Klasse (kopiere dir die passende Klasse aus den CSS-Code-Scripten, z.B. "galeriebild-3-2")
Kopiere dir nun den passenden Code
Quadratisch 1:1:
/*Galeriebilder quadratisch*/ .galeriebild-quadratisch .et_pb_gallery_image {
padding-top: 100%;
display: block;
}
.galeriebild-quadratisch .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
–––––––––––––––
Querformat 16:9
/*Galeriebilder Querformat 16:9*/ .galeriebild-16-9 .et_pb_gallery_image {
padding-top: 56.25%;
display: block;
}
.galeriebild-16-9 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
–––––––––––––––
Querformat 4:3
/*Galeriebilder Querformat 4:3*/ .galeriebild-4-3 .et_pb_gallery_image {
padding-top: 75%;
display: block;
}
.galeriebild-4-3 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
–––––––––––––––
Querformat 3:2
/*Galeriebilder Querformat 3:2*/ .galeriebild-3-2 .et_pb_gallery_image {
padding-top: 66.66%;
display: block;
}
.galeriebild-3-2 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
–––––––––––––––
Portrait/Hochformat 9:16
/*Galeriebilder Hochformat 9:16*/ .galeriebild-hoch-9-16 .et_pb_gallery_image {
padding-top: 177.77%;
display: block;
}
.galeriebild-hoch-9-16 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
–––––––––––––––
Portrait/Hochformat 3:4
/*Galeriebilder Hochformat 3:4*/ .galeriebild-hoch-3-4 .et_pb_gallery_image {
padding-top: 133.33%;
display: block;
}
.galeriebild-hoch-3-4 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
–––––––––––––––
Portrait/Hochformat 2:3
/*Galeriebilder Hochformat 2:3*/ .galeriebild-hoch-2-3 .et_pb_gallery_image {
padding-top: 150%;
display: block;
}
.galeriebild-hoch-2-3 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Code einfügen
Nun kannst du den passenden Code auf deiner Seite einfügen. Gehe dazu im Dashboard auf Divi in die Theme-Optionen und füge den Code in das Feld Eigene CSS ein (ganz unten).
