Bildgröße im Modul Galerie anpassen

Um im Modul Galerie die Bildgröße anzupassen, musst du ein wenig CSS in das Modul einfügen.

Schritt 1:
Gib im Galerie-Modulim Tab „Erweitert“ die gewünschte CSS-Klasse an. In den Beispielen unten ist dies das erste zusammengesetzte Wort hinter dem Punkt, also z.B. galeriebild-quadratisch

Schritt 2:
Gehe zu den Divi Theme-Optionen und gib folgendes Scripte unter „eigenes CSS“ ein.

CSS Code

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

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

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

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

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

 

Marco Linke

Gründer & CEO

Ich bearbeite alle Anfragen der Reihe nach ab. Besonders dienstags und freitags versuche ich, möglichst alle Anfragen zu beantworten.

Forum

Einer für alle. Alle für einen! Nach diesem Motto findest du auch in unserem Forum weitere Hilfe.

Es ist eilig?

Ich biete auch individuelle Hilfe an.