Divi – Galeriephotos angleichen

von | 13. Okt 2020 | Blog

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;
}

 

 

 

 

 

Ähnliche Beiträge: