200908Dez

jQuery Fullscreenr: Bilder auf Fenstergröße skalieren

Wenn es etwas mehr sein darf und Bilder auf einer Website so groß als möglich gezeigt werden sollen (beispielsweise als Website-Hintergrund), bieten sich verschieden Möglichkeiten an. Allein mit HTML/CSS und einem img-Element könnte man die Größe des Bildes mit der CSS-Deklaration "width:100%;" der Größe des Browserfensters (bzw. des body-Elements) in der Breite anpassen. Würde man noch "height:100%;" hinzufügen, würde das Bild zwar das komplette Fenster ausfüllen, jedoch wären die Proportionen nicht mehr erhalten.
Jan Schneiders bietet hierfür mit seinem jQuery-Plugin Fullscreenr eine elegante Lösung an: Mit dem Skript wird ein Hintergrundbild auf die Größe des Browserfensters angepasst, wobei es zentriert und entsprechend beschnitten wird.

jQuery Fullscreenr

Auf der Demoseite kann man sich von dem Resultat überzeugen. Für eine optische Aufwertung mittels Hintergrundbild eignet sich das Skript sehr gut. Die Einbettung erfolgt in etwa so:

  • var FullscreenrOptions = {
  • width: 1024,
  • height: 683,
  • bgID: "#bgimg"
  • };
  •  
  • jQuery.fn.fullscreenr(FullscreenrOptions);

Wie man sieht, muss einmalig die Originalgröße des Bildes angegeben werden. Der img-Container mit der ID "bgimg" enthält das Bild und wird angezeigt, falls der Benutzer JavaScript ausgeschaltet haben sollte.

RSS-Feed abonnieren Bookmark bei Del.icio.us Bookmark bei Mister Wong