imagefill.js - making images fill their containers

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

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

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})