Responisve Images - Bilder richtig in Websites einbinden
Big Picture mit 1252px maximaler Breite
Große Bilder für den Header, deren Breite durch den Wrapper begrenzt sein soll.
Beispiel:
Maximale Breite = 1.252 px.
Auf Grund der Größe sollte das Ausgangsbild in Photoshop 3.000 bis 3.500 px breit erstellt werden, denn es gibt heute hochauflösende Bildschirme.
Ein Samsung Galaxy S8 + hat 740px x 4 = 2.960px.
1.252px * 0.55 = 688,6px
1.252px * 1.3 = 1.627,6px
1.252px * 2.05 = 2.566,6px
Das Ausgangsbild sollte also die größte Auflösung mit 2.566,6px haben.
Die Einstellung (max-width:1252px) 100vw, 1252px bedeutet:
- alles was bis 1.252px Bildschirmbreite ist, soll 100vw haben
- alles was über 1.252px Bildschirmbreite ist, soll maximal 1.252px haben
Somit ist gewährleistet, das bei extrem breiten Bildschirmen nicht der vw genommen wird, wenn wir nur ein 1.252px-breites Bild brauchen.