pseudo-title

FullWidth-Images & -Slider

Slider und Bildelemente mit "Fensterbreite"

 

Quelle: https://expanding.jimdo.com/hacks/full-width-slider/

 

Normalerweise können Bilder und Slider-Images nicht breiter angelegt werden, als die Breite des Content-Bereiches es zulässt.

Mit einem kleinen CSS-Hack können wir diesen Effekt allerdings "simulieren":

 

CSS:

 

<style type="text/css">

/* full width image slider */

 

#cc-m-13596341525 {

width: 100vw;

left: calc(-50vw + 50%);

position: relative;

padding: 0px;

}

 

.cc-m-gallery-slider ul img {

height: auto !important;

}

</style>

 

 

 

Text über Slider-Element

Der gleiche Trick lässt sich auch auf Bildelemente anwenden:

 

CSS

    #cc-m-10936183121 {

        width: 100vw;

        left: calc(-50vw + 50%);

        position: relative;

        padding: 0px;

    }

    

    #cc-m-10936183121 img {

        height: auto !important;

        width: 100vw;

    }

 

Text über Bild-Element