imagefill.js

The jQuery plugin for making images fill their containers (and be centered)

a potentially useful tool for Responsive Web Design

Created by John Polacek

Fork me on GitHub
Octocat Github Mascot

Download

Source files on github or download the zip.

Simple Example

Given this html:

<div class="container"><img src="myawesomeimage" /></div>

Do this:

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

Grid Example

Given a grid like this:

<div class="grid-whole">
    <div class="grid-quarter">
        <img src="myawesomeimage.jpg">
    </div>
    <div class="grid-quarter">
        <img src="myawesomeimage.jpg">
    </div>
    <div class="grid-quarter">
        <img src="myawesomeimage.jpg">
    </div>
    <div class="grid-quarter">
        <img src="myawesomeimage.jpg">
    </div>
</div>

Do this:

$('.grid-quarter').imagefill(); 
// image stretches to fill container
Octocat Github Mascot
Octocat Github Mascot
Octocat Github Mascot
Octocat Github Mascot

Check out this simple responsive grid example.

Different Sizes Example

Given images that vary in sizes, for example using jQuery Masonry or Packery, do this:

$('.item').imagefill(); 
// image stretches to fill container
Octocat Github Mascot
Octocat Github Mascot
Octocat Github Mascot
Octocat Github Mascot

Check out this simple packery example which is also a nice use case for the {runOnce:true} option.

Options

runOnce
Imagefill continuously checks to see if the size of the image container changes, then it adjusts the size of the image inside. To only run once, set to false.

$('.img-container').imagefill({runOnce:true});

throttle
Imagefill continuously checks to see if the size of the image container changes, then it adjusts the size of the image inside. This option lets you adjust the frequency of this check (default is 100ms). To run at a higher frequency, such as for an animation rate like 60fps, do this:

$('.animating-container').imagefill({throttle:1000/60})

Requires:

If you like imagefill.js, you might also like: