imagefill.js

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

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 call imagefill once, set to true.

$('.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})

target
By default, Imagefill will use 'img' as the target selector. To use a custom selector to tell imagefill which img to target for filling its container use the target option.

$('.animating-container').imagefill({target:'.background-image'})

Requires:

• imagesLoaded

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

• Packery - The bin-packing layout library that is from the same mad genius who created jQuery Masonry and isotope.
• equalize.js - The jQuery plugin for equalizing the height or width of your elements
• Extra Strength Responsive Grids - The Fluid CSS Grid System for Responsive Web Design. Take total control of your layouts.
• stacktable.js - jQuery plugin for stacking tables on small screens.
• Prevent FOUC - Prevent FOUC with 2 easy steps.