Wie deine Websitebilder bei jeder Bildschirm-Größe an der richtigen Stelle bleiben

April 23, 2024

Möchtest du es lieber als Tutorial anschauen?

Warum die Horizontalverriegelung wichtig ist

“Horizontalverriegelung” bedeutet genau das, was ich in der Überschrift geschrieben habe: Wie deine Websitebilder bei jeder Bildschirm-Größe an der richtigen Stelle bleiben

Deine Website kann von BesucherInnen auf ihrem Handy, Laptop, Tablet oder Desktop-Computer aus aufrufen. Mit Showit kannst du das Design deiner Website an eine mobile und eine Desktop-Version anpassen, damit deine Website auf verschiedenen Bildschirmgrößen perfekt wiedergegeben wird.

Es gibt jedoch auch verschiedene Größen für mobile Geräte und verschiedene Größen für Desktop-Geräte. Bleiben wir noch einen Moment bei den Desktops. Es gibt einen großen Unterschied zwischen einem 13,3 Zoll, einem 15,4 Zoll und einem 17 Zoll Bildschirm! Das wird dir besonders bei der Platzierung von Bildern auffallen. Nehmen wir an, du möchtest, dass sich ein Bild über den gesamten Bildschirm erstreckt, und du passt das Bild an einen 13,3 Zoll Bildschirm an. Wenn jemand deine Website auf einem 17 Zoll Bildschirm anschaut, wird das Bild nicht über die gesamte Breite reichen, weil der Bildschirm breiter ist. Auf jeder Seite des Bildschirms wird eine Lücke bleiben.

Hier ein kleines Beispiel: Im ersten Bild siehst du die Seite, wie ich sie an meinem Laptop designt habe, mit dem Gräser-Bild, dass vom ganz linken zum ganz rechten Rand reicht:

Wenn man die gleiche Seite aber auf einem größeren Bildschirm ansieht, sieht es plötzlich so. Das Bild reicht nicht mehr bis zu beiden Seiten, sondern hat diese komischen Abstände rechts und links:

Und um genau das zu vermeiden brauchen wir die Horizontalverriegelung – oder auf Englisch in Showit “Horizontal Locking” genannt.

Dehnen zum Ausfüllen

Wenn du das Bild so strecken möchten, dass es den gesamten Bildschirm ausfüllt, egal wie groß oder klein der Bildschirm ist, klicke auf das Bild, gehe zu SIZE & POSITION (auf der rechten Seite) und wähle die rot markierte Option:

Dehnung von einem festen Punkt bis zum Rand des Bildschirms

Wenn du jedoch ein Bild hast, das von einem bestimmten Punkt auf dem Bildschirm (in meinem Beispiel an der rechten Kante des beigen Kastens) bis zum Rand des Bildschirms reichen soll, wähle die rot markierte Option (das Gleiche gilt natürlich mit dem Pfeil der nach links zeigt, wenn du möchtest, dass etwas bis zum linken Rand reichen soll):

Fest auf einer Seite des Bildschirms bleiben

Die letzte Möglichkeit, Horizontal Locking zu verwenden, besteht darin, ein Bild auf einer Seite des Bildschirms zu fixieren, ohne es zu dehnen, wie das Bild der Frau mit dem Hut: