Divi: Um verschieden große Bilder (Galeriephotos) in der Divi-Galerie anzugleichen, damit die Galerie einheitlich aussieht, tun wir folgendes:

1. Im Galerie-Modul geben wir im Tab “Erweitert” die CSS-Klasse an (siehe in den Scripten die erste angegebene Klasse, z.B. galeriebild-quadratisch)
2. 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;
}