a potentially useful tool for Responsive Web Design
Created by John Polacek
Given this html:
<div class="container"><img src="myawesomeimage" /></div>
Do this:
$('.container').imageFill(); // image stretches to fill container
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.
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.
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})