suit: Vollflächiges Hintergrundbild, proportional skaliert

Beitrag lesen

Jedoch sollte beim waagerechten Verkleinern das Bild nicht gestaucht werden...

  1. Bildamessungen bestimmmen
  2. Abmessungen der Anzeigefläche bestimmen
  3. größtes Verhältnis von einer Kante des Bildes zur Anzeigefläche Bestimmen
  4. Breite und Höhe auf Bildkante * Verhältnis setzen
  5. Außenabstand links und oben auf ((Bildkante * Verhältnis)-Anzeigefläche)/2 setzen

Das sind etwa 10 Zeilen JavaScript - das Packst du in eine Funktion und führst es beim load-, resize- und orientationchange-Event aus.

Mit CSS3 geht das natürlich auch, aber der Browser-Support dafür ist begrenzt - siehe background-size