Hintergrundbildocde

[suit]

Kennt jemand so einen Code?

Ich hab' da mal etwas vorbereitet - möglicherweise geht sich da noch ein kurzer Artikel dazu aus :)

http://suit.rebell.at/fileadmin/a-33/example/

"Kurz":

Die Sache ist als kleines jQuery-Plugin geschrieben.

Der erste Teil erweitert das jQuery-support-Property um eine Eigenschaft, die true liefert wenn background-size nativ vom Browser unterstützt wird.

Der zweite Teil ist das eigentliche Plugin, welches eine Methode unterhalb des jQuery-Objekts bereitstellt. Mit dem Wert "true" für das init-Argument wird eine kleine Routine angeworfen, die das Hintergrundbild des selektieren Elements ausliest und als img-Element darin einfügt und dann das Hintergrundbild wieder entfernt (Zeile 13 bis 29)

Der essentielle Teil, der das proportionale Skalieren des Bildes übernimmt findet sich in functions.js in Zeile 30 bis 40.

47 bis 51 ist nur zu Demonstrationszwecken um zu zeigen, ob das JavaScript überhaupt zum Einsatz kommt oder ob die native Darstellung belassen wird.

Die Methode muss nur bei ready und resize (optional bei orientationchange) aufgerufen werden. Wann init true oder false zu verwenden ist, sollte klar sein.

Aktuell funktioniertdie Sache außer im IE6 und iOS-Geräten (mangels position: fixed) völlig korrekt - das ist aber kein JavaScript-Problem sondern eine HTML- und CSS-Sache, die gefixt werden kann, wenn man etwas Zeit in einen Workaround reinsteckt. Das interssiert mich grade aber nicht :)

Das JavaScript agiert momentan so wie background-size es mit "cover" tut - also das Bild "umschreibt" das Element, wenn man "contain" (also das Bild wird vom Element eingeschrieben) nutzen möchte, muss man das Verhältnis mit Math.min() bestimmen.

Die Deluxe-Variante könnte das natürlich selbständig aus dem CSS auslesen, aber dazu habe ich auch grade keine Lust :)