Galerie image Plaine largeur

Galerie Slider

/* Pleine largeur galerie slider 100%*/
@media (min-width: 768px) {.cc-m-gallery-slider ul img {margin: 0 auto;height: 50vh !important;max-height: 50vh !important; object-fit: cover; width: 100%; }}
@media (max-width: 768px) {.cc-m-gallery-slider ul img {margin: 0 auto;height: 20vh !important;max-height: 20vh !important; object-fit: cover; width: 100%; }}
.cc-m-gallery-slider {width: 100vw; left: 50%; transform: translateX(-50%); position: relative; padding: 0px 0% 0% 0%!important; background-color: #000; margin-top: 0px;}
/* POUR EVITER SUR SMARTPHONE LE DEFILMEENT AVEC LE DOIGHT */
@media (min-width: 768px) {.cc-m-gallery-container { z-index:0;}}
@media (max-width: 768px) {.cc-m-gallery-container { z-index:-1;}}
@media (min-width: 768px) {.jtpl-section-main{ background-color: ;}}
@media (max-width: 768px) {.jtpl-section-main{ background-color: unset;}}
/* .bx-wrapper { -ms-touch-action: none!important; touch-action: none!important;}*/
/* .cc-m-gallery-slider .bx-wrapper .bx-viewport ul { transform:none!important}*/
.bx-wrapper .bx-controls-auto .bx-controls-auto-item, .bx-wrapper .bx-pager-item { display:none}
.bx-wrapper .bx-controls-direction a { display:none}
.cc-m-gallery-slider a.cc-m-gallery-slider-fullscreen { display:none!important}

Si besoin de mettre le texte par dessus :

/* SI BESOIN DE METTRE TEXTE PAR DESSUS
.cc-m-gallery-slider .bx-wrapper .bx-caption span {
padding: 8px;
color: #fff!important;
font-size: 46px!important;
position: absolute;
top: -27vh;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 80vw;
left: 50%;
transform: translateX(-50%);
background-color: rgb(0 0 0 / 55%);
border-radius: 0px;
} */

Sur le site www.sandra-sabina.fr sur certaines pages il y a une galerie image en mode slider à 100% pleine largeur et avec une hauteur de 50vh et sur smartphone, le slider ne peut pas etre manipulé avec le doigt, ce qui est plus facile à utiliser quand on souhaite descendre dans une page

Gallerie Image Verticale

/* Pleine largeur galerie image verticale 100% */
@media (min-width: 768px) {.jtpl-content .cc-m-gallery-stack{ background:#fff; color: white; width: 100vw; left: calc(-50vw + 50%); position: relative; padding:40px 0px !important; } }
@media (max-width: 768px) {.jtpl-content .cc-m-gallery-stack { background:#fff; color: white; width: 100vw!important; left: calc(-50vw + 50%); position: relative; padding:0px !important; } }

Si les images non pas la même taille en hauteur, alors ...

...mettre code suivant :

@media (min-width: 768px) {.cc-m-gallery-stack img { height: 22vw!important; object-fit: cover;}}
@media (max-width: 768px) {.cc-m-gallery-stack img { height: 22vw!important; object-fit: cover;}}

Affichage sur smartphone :

/* si besoin d'afficher à 100% sur smartphone alors : */
@media (max-width: 768px) {.cc-m-gallery-stack img { height:unset!important ; object-fit: ;}}
@media (max-width: 768px) {.cc-m-gallery-stack-column{ width: 100%!important;}}

Exemple aussi sur le site https://www.alves-amenagement.fr/renover-sa-cuisine/ il y a une galerie image verticale à 100%