Divi: Um verschieden große Bilder (Galeriephotos) in der Divi-Galerie anzugleichen, damit die Galerie einheitlich aussieht, tun wir folgendes:
- Im Galerie-Modul geben wir im Tab „Erweitert“ die CSS-Klasse an (siehe in den Scripten die erste angegebene Klasse, z.B. galeriebild-quadratisch)
- Dann wechseln wir zu den Divi Theme-Optionen und geben die entsprechenden Scripte als eigenes CSS ein.
Script-Beispiele
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 2:3
/*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;
}