Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
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 verantwortlich für bekannte Tools wie Bigvideo.js, Scrollorama, Responsivator und vielen mehr. Vor einer guten Woche fügte er seinem ohnehin schon beachtlichen Portfolio ein weiteres Werkzeug hinzu. Mit Imagefill.js sorgt man dafür, dass Bilder stets den sie umgebenden Container füllen und sich dabei zentrieren. Das Seitenverhältnis bleibt dabei gewahrt.

Anzeige

imagefill-startpage

Imagefill.js: Kein Schnick-Schnack

Imagefill.js ist ein kleines Tool mit übersichtlichem Anspruch. Es sorgt per Funktionsaufruf auf die ID eines Containers dafür, dass das in diesem Container enthaltene Bild zentriert und auf die Größe des Containers angepasst wird. Es findet keine Veränderung der Seitenverhältnisse statt. Stattdessen wird dann lediglich ein zentrierter Bildausschnitt gezeigt. Indem man verschachtelte Container anlegt, ist auch eine Optik á la Pinterest oder ein bildschirmfüllendes Grid aus Divs realisierbar.

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

Imagefill.js setzt jQuery und das separat erhältliche Plugin ImagesLoaded voraus. ImagesLoaded stellt lediglich fest, wann alle Bilder eines definierten Bereichs geladen sind, so dass Imagefill.js überhaupt erst sinnvoll aktiv werden kann. Um das Plugin einzusetzen, binden Sie entsprechend jQuery, dann ImagesLoaded und dann Imagefill.js im Head Ihrer Seite ein.

Ein entsprechendes Div kann dann so aussehen:

Der Funktionsaufruf stellt sich wie folgt dar:

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

Wie bereits erwähnt, sind beliebige Verschachtelungen möglich, Polacek liefert hier ein Beispiel eines bildschirmfüllenden, vollständig responsiven Grid:

imagefill-responsive
Bildschirmfüllend, responsiv

Mit zusätzlichen Tools, etwa Packery, kann eine Pinterest-ähnliche Präsentation realisiert werden.

Polacek stellt Imagefill.js unter GPL- und MIT-Doppellizenz für den privaten, wie kommerziellen Gebrauch kostenlos ab. Das Tool kann bei Github heruntergeladen werden.

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 umgebenden Container füllen und sich dabei zentrieren. Das Seitenverhältnis bleibt dabei gewahrt.“

    Das geht doch auch mit CSS und ohne jQuery – nämlich mit „background-size: cover“!

    Und mit „background-position: x% y%“ kann ich das Bild nicht nur zentrieren, sondern auch festlegen, welcher Teil des Bildes beim Beschnitt sichtbar bleibt. Zu sehen zum Beispiel beim Hintergrundbild von gregorsalz.de.

    Schöne Grüße!

    • Wo ich mir das gerade durchgelesen habe, hatte ich den gleichen Gedanken.

      Aber wenn man sich den Quellcode von der Beispiel Seite anschaut, sieht man das es keine Hintergrundbilder sind und soweit ich weiß geht das mit dem background-size und background-position nur bei Container Elementen als Hintergrundbild.

Schreibe einen Kommentar zu Stefan Hansel Antworten abbrechen

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