Full Width im Design ist nicht gleich Full Width bei der Umsetzung. Im Design setzt ihr die Screenbreite auf 1440px oder ähnliches. In dieser Breite sehen Bilder dann optimiert gut aus. Aber was passiert bei größeren Extremfällen?
Hier werden euch Beispiele gezeigt, wie sich “Full Width” Bilder auf Vollbild verhalten. Zum testen, kannst du diese Beispiele in deinem Browserfenster extrem in die Breite ziehen. Wenn dein Bildschirm nicht so breit ist, öffne die Entwicklertools und vergrößere dein Fenster im Browser
Euer Image ist immer so breit wie die volle Bildschirmbreite und skaliert sich proportional in Höhe und Breite. Bild wird nicht beschnitten.
Ihr könnt eine maximale Breite festlegen, dass zum Beispiel das Bild auf die volle Breite geht, aber bei 1800px (oder anderer Wert) das Bild nicht mehr weiter skaliert sondern einfach mittig angeordnet wird
Ihr könnt eine feste Höhe festlegen. Dadurch wird das Bild jedoch beschnitten. Nachteil, wenn Textinformationen im Bild integriert werden (zB. Werbebanner bei Slidern)
Man kennt es: die guuden alten 50% Images. Nun gut, aber schonmal Gedanken drüber gemacht wie 50% Bilder im Extremfall aussehen? Nice Ich zeigs dir!
Auf 1440px sieht alles top aus. Das Verhältnis Bild zu Text ist perfekt. Jetzt legen wir fest, dass die Höhe vom Bild im Design als feste Höhe verwendet werden soll und das Bild oben und unten beschnitten werden soll.
Ähnlich wie bei den Full Width Bannern können wir den erweiterten Container (hier 1800px) auch für diese Section verwenden. Allerdings kommt es hier auf das Design im Umfeld an, ob man das so einbauen kann…
Es gibt kein Richtig und kein Falsch. Es kommt sehr auf den Kontext an. Bei manchen Projekten sieht die skalierbare Variante top aus, bei anderen ist es doch besser die Bilder beschneiden zu lassen. Und manchmal ist es auch gut wenn man einen erweiterten Container nutzt. Macht euch aber bitte Gedanken dazu im Design und besprecht das bei der Übergabe mit dem Entwickler, wie ihr es haben wollt. Dann können wir die ganzen “Warum wird das Bild beschnitten” Aussagen beim Quality Check einsparen 😘
Sie sehen gerade einen Platzhalterinhalt von Facebook. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen