Responsives Webdesign
Bilder behalten immer ihr Seitenverhältnis.
Die einfachste Layout-Lösung besteht darin, dass Bilder über verschiedene Displaygrößen hinweg proportional (4:3 / 16:9) skaliert werden. Das Seitenverhältnis bleibt also unverändert und die Motive werden nie beschnitten oder verzerrt.
Optimale Bildgrößen sind:
480 px x 160 px für Smartphones
992 px x 200 px für Tablets
1440 px x 240 px für Desktop-Monitore
1920 px x 280 px für große Monitore
Statisches Layout
Die Bilder müssen an den Spaltengrößen angepasst werden. Die richtige Bildgröße könne werden ermittelt:
1) Das (Vorlagen) Bild in der Mediathek öffnen. Im unteren Teil steht die Bildgröße (Breite/Höhe).
2) Direkt im Browser: Auf das Bild mit der rechten Maustaste klicken => Untersuchen auswählen und auf das entsprechende Bild mit dem Mausezeiger fahren.