Hi,
um nochmal auf das Thema Banner und CLS zurückzukommen hier mal eine, ich hoffe verständliche Anleitung, wie man das ganze in den Griff bekommt am Beispiel des Standard Banners, der im Demoshop eingebunden ist.
Wichtig dabei ... nicht einfach kopieren und einfügen ... das kann auch schief gehen je nachdem welche Bildgrößen ihr verwendet.
BildgrößeBannerbild Desktop: 985px - 400px
Bannerbild Mobil: 600px - 400px
Daraus ergibt sich nach einem Dreisatz folgendes Seitenverhältnis:
Bannerbild Desktop: 40.6091% (Höhe zu Breite)
Bannerbild Mobil: 66.6666% (Höhe zu Breite)
CSSDer Banner ist im folgenden DIV-Container eingebunden:
<div class="content_banner cf">{$BANNER}</div>
Im CSS sieht das im Original so aus:
.content_banner {
margin: 20px 0 20px 0;
}
.content_banner img {
float:left;
width:100%;
height:auto;
}
Das alte CSS brauchen wir nicht mehr. Das kann auskommentiert bzw. gelöscht werden. Das müssen wir entsprechend anpassen.
Damit wir innerhalb von content_banner irgendwas absolut positionieren können müssen wir erstmal ein "position: relative" einfügen. Sicherheitshalber noch ein "overflow:hidden" damit nichts übersteht.
Das sieht dann so aus:
.content_banner {
margin: 20px 0 20px 0;
position:relative;
overflow:hidden;
}
Jetzt haben wir zwar einen Container aber noch keine Höhe im gewünschten Seitenverhältnis.
Dafür sorgen wir jetzt mit dem Pseudoelement :before
So sieht das CSS dann aus:
.content_banner:before {
content: "";
display:block;
padding-top: 66.6666%;
}
@media only screen and (min-width: 600px) {
.content_banner:before { padding-top: 40.6091%; }
}
Da das CSS nach dem Prinzip "mobile first" arbeitet fangen wir mit der Anweisung für Mobil an.
Das padding-top sorgt dafür dass der Container "content_banner" hier eine Höhe von 66.666% der Containerbreite bekommt. (Das ist das Seitenverhältnis welches wir oben ausgerechnet haben.)
Ab einer Bildschirmbreite von 600px schalten wir dann um auf den Desktop-Banner und passen hier dann das Seitenverhältnis an.
Jetzt fehlt nur noch das Bild.
In einem solchen Konstrukt muss "absolut" positioniert werden.
Dafür brauchen wir dann das folgende CSS:
.content_banner img {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
Damit wird das Bild immer 100% der Breite und 100% der Höhe des Containers haben.
Abgeschnitten bzw. verzerrt wird ebenfalls nichts sofern das richtige Seitenverhältnis ausgerechnet wurde.
Das ganze kann auf jeden Container angewendet werden. Wichtig ist immer nur das richtige Seitenverhältnis im Vorfeld auszurechnen.
Damit sind dann die Layoutverschiebungen auf der Startseite verschwunden.
Viel Sapß damit
Markus