Header Bild Responsive Darstellung Höhe

Servus,

weiß jemand wie ich das Header Bild (Responsive) um gut 1/3 mehr in die Höhe bekomme. Bild Fokus kann auch zentriert sein. Anbei Screenshot. Layout: Campfire Responsive - Storyteller.

Https://www.mircoclapier.com

Servus, ich habe vorab provisorisch eine Lösung, aber das Bild muss noch zentriert dargestellt werden. Wie? Weil unter Layout-Einstellungen geht das nicht.

CSS

style>

@media screen and (max-width:640px) {
    .objectfit #slider .flex-container {
        padding-bottom: 0 !important;
        height: auto !important;
    }


    .objectfit #slider .slides > li img {
        width: 180%;
        height: 180%;
        object-fit: fill;
    }

}

</style>

Zitat von Steffen T.

Wunderbar! Vielen herzlichen Dank!

CSS

<style>

@media screen and (max-width:640px) {
    .objectfit #slider .flex-container {
        padding-bottom: 0 !important;
        height: auto !important;
    }


    .objectfit #slider .slides > li img {
        width: 180%;
        height: 180%;
        object-fit: fill;
        position: relative;
        left: -50%;
    }

}

</style>

Alles anzeigen

Zitat von Steffen T.

Oh ich war zu Voreilig. Auf dem iPhone sind dann beide Slide-Bilder 50%/50% zu sehen... ich lasse es mal so wie es ist

Vielen Dank und VG

CSS

<style>

@media screen and (max-width:640px) {
    .objectfit #slider .flex-container {
        padding-bottom: 0 !important;
        height: auto !important;
    }


    .objectfit #slider .slides > li img {
        width: 180%;
        height: 180%;
        object-fit: fill;
        position: relative;
        left: -50%;
    }

}

</style>

Alles anzeigen

Zitat von Stefan S

OH ja das hat super funktioniert Herzlichen Dank.

CSS

<style>
@media screen and (max-width: 640px){
    .objectfit #slider .slides > li{
        height: 75vh; /* 75% der Bildschirmhöhe */
    }
    .objectfit #slider .slides > li img{
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}
</style>

Alles anzeigen