imagefill.js

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

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

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:

• imagesLoaded