Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 23. Juli 2013

Imagefill.js: Tool für responsives Design passt Bilder an den umgebenden Container an

Kein Beitragsbild

John Polacek aus Chicago ist der Designer-Community kein Unbekannter. Er ist ver­ant­wort­lich für bekann­te Tools wie Bigvideo.js, Scrollorama, Responsivator und vie­len mehr. Vor einer guten Woche füg­te er sei­nem ohne­hin schon beacht­li­chen Portfolio ein wei­te­res Werkzeug hin­zu. Mit Imagefill.js sorgt man dafür, dass Bilder stets den sie umge­ben­den Container fül­len und sich dabei zen­trie­ren. Das Seitenverhältnis bleibt dabei gewahrt.

imagefill-startpage

Imagefill.js: Kein Schnick-Schnack

Imagefill.js ist ein klei­nes Tool mit über­sicht­li­chem Anspruch. Es sorgt per Funktionsaufruf auf die ID eines Containers dafür, dass das in die­sem Container ent­hal­te­ne Bild zen­triert und auf die Größe des Containers ange­passt wird. Es fin­det kei­ne Veränderung der Seitenverhältnisse statt. Stattdessen wird dann ledig­lich ein zen­trier­ter Bildausschnitt gezeigt. Indem man ver­schach­tel­te Container anlegt, ist auch eine Optik á la Pinterest oder ein bild­schirm­fül­len­des Grid aus Divs rea­li­sier­bar.

imagefill-exp
Anpassung an den Container ohne Änderung des Seitenverhältnisses

Imagefill.js setzt jQuery und das sepa­rat erhält­li­che Plugin ImagesLoaded vor­aus. ImagesLoaded stellt ledig­lich fest, wann alle Bilder eines defi­nier­ten Bereichs gela­den sind, so dass Imagefill.js über­haupt erst sinn­voll aktiv wer­den kann. Um das Plugin ein­zu­set­zen, bin­den Sie ent­spre­chend jQuery, dann ImagesLoaded und dann Imagefill.js im Head Ihrer Seite ein.

Ein ent­spre­chen­des Div kann dann so aus­se­hen:

Der Funktionsaufruf stellt sich wie folgt dar:

$('.container').imageFill(); 
// image stretches to fill container

Wie bereits erwähnt, sind belie­bi­ge Verschachtelungen mög­lich, Polacek lie­fert hier ein Beispiel eines bild­schirm­fül­len­den, voll­stän­dig respon­si­ven Grid:

imagefill-responsive
Bildschirmfüllend, respon­siv

Mit zusätz­li­chen Tools, etwa Packery, kann eine Pinterest-ähn­li­che Präsentation rea­li­siert wer­den.

Polacek stellt Imagefill.js unter GPL- und MIT-Doppellizenz für den pri­va­ten, wie kom­mer­zi­el­len Gebrauch kos­ten­los ab. Das Tool kann bei Github her­un­ter­ge­la­den wer­den.

Links zum Beitrag

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

3 Kommentare

  1. “…, dass Bilder stets den sie umge­ben­den Container fül­len und sich dabei zen­trie­ren. Das Seitenverhältnis bleibt dabei gewahrt.”

    Das geht doch auch mit CSS und ohne jQuery – näm­lich mit “back­ground-size: cover”!

    Und mit “back­ground-posi­ti­on: x% y%” kann ich das Bild nicht nur zen­trie­ren, son­dern auch fest­le­gen, wel­cher Teil des Bildes beim Beschnitt sicht­bar bleibt. Zu sehen zum Beispiel beim Hintergrundbild von gregorsalz.de.

    Schöne Grüße!

    • Wo ich mir das gera­de durch­ge­le­sen habe, hat­te ich den glei­chen Gedanken.

      Aber wenn man sich den Quellcode von der Beispiel Seite anschaut, sieht man das es kei­ne Hintergrundbilder sind und soweit ich weiß geht das mit dem back­ground-size und back­ground-posi­ti­on nur bei Container Elementen als Hintergrundbild.

      • Hallo Vincent,

        dan­ke für Deine Antwort! Bei gregorsalz.de sind die bild­schirm­fül­len­den Bilder per CSS als back­ground-image des body defi­niert.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.