Když potřebujete udělat DIVI galerii 1:1 čtverec 1:1 – 1 / 1 = 1.00 = 100%
Modul galerie
OBSAH
Počet obrázků: 8
Prvky:
Zobrazit titulek a popisek NE
Zobrazit stránkování: NE
NÁVRH
Rozvržení: Mřížka
POKROČILÉ
Třída CSS: moje-galerie-ctverec-1
Řádek
NÁVRH
Změny velikosti
Vlastní mezera mezi sloupci: ANO
Mezery mezi sloupci: 1
Kód
/*galerie ctverec 1:1*/
.moje-galerie-ctverec-1 .et_pb_gallery_image {
padding-top: 100%;
display: block;
}
.moje-galerie-ctverec-1 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Když potřebujete udělat DIVI galerii na šířku 16:9 – 9 / 16 = 0.5625 = 56.25%
Kód
/*galerie 16:9*/
.moje-galerie-16-9-1 .et_pb_gallery_image {
padding-top: 56.25%;
display: block;
}
.moje-galerie-16-9-1 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
DALŠÍ VELIKOSTI
Všimněte si, že měním jen padding-top a název třídy, takže si můžete změnit snadno velikost podle sebe.
další velikost na šířku 4:3 – 3 / 4 výpočet = 0.75 = 75%
další velikost na šířku 3:2 – 2 / 3 výpočet = 0.6667 = 66.67%
portrét 9:16 – 16 /9 výpočet = 1.7778 = 177.78%
portrét 3:4 – 4 / 3 výpočet = 1.3334 = 133.34%
portrét 2:3 – 3 / 2 výpočet = 1.5 = 150%