Headerbild 5

Bei Bildern ab einem Seitenverhältnis von 19:9 kann man am Smartphone in der Regel nicht mehr viel vom Foto erkennen. Deshalb blenden wir hierfür ein Quadratisches Bild ein. Hierbei kann man wunderbar den Fokus des Bildes einfangen, dieser muss nicht unbedingt in der Mitte des Bildes liegen, man kann aber auch ein ganz anderes Bild verwenden.  Außerdem können wir hier ein sehr viel kleineres Bild verwenden welches die Ladezeit am Mobilen Gerät deutlich verkürzt. Ein weiterer Vorteil ist das man den Text im Bild wieder grösser darstellen kann weil dieser dann nicht mehr so viel vom Bild verdeckt.

• In diesem Beispiel verwenden wir den Header 1, das funktioniert aber auch mit allen anderen Headern.
• Erstellt das Headerbild wie in Headerbild 1 beschrieben.
• Erstellt das kleines Bild in der Größe 380x380px, importiert dieses in die Bildverwaltung. Dieses müsst ihr ebenfalls wie beschrieben Schützen und die Objekt-ID kopieren.
• Nun fügt ihr den CSS-Code dem bestehenden hinzu, Diesen fügt ihr direkt vor dem abschließenden </style> hinzu.
• Den Quelltext fügt ihr in dem gleichen Widget-Quelltext hinzu. Auch hier direkt hinter dem bestehenden Code. Hier ersetzt ihr MEIN-BILD-MOBILE durch die Objekt-ID des kleinen Bildes.