Philippe Masset

Engineer at Buffer.

jQuery.ImageFill

jQuery.imagefill preview

jQuery.imagefill scales images up or down so as to fill their containers.

Live example

http://jsfiddle.net/pioul/g8wNT/

Basic usage

HTML:

<div>
    <img src="http://placekitten.com/g/600/1000"/>
</div>

JavaScript:

$("img").imagefill();

jQuery.imagefill options

container (string, default: null)

If the container the image has to fill isn't its immediate parent, container has to be the CSS selector that will be used to find the right container.

The CSS selector will be run through .closest(), so it still has to be one of the image's ancestors.

fadingDuration (number, default: 500)

All images that aren't loaded (or are still loading) when the plugin is executed are hidden until they're fully loaded and stretched.

By default, a 500ms fading animation is used to show them. You can either change that duration, or disable the animation altogether by setting this option to 0.

jQuery.imagefill events

Events are triggered on the images.

fillsContainer

Triggered when an image has been stretched to fill its container and is visible.

This event passes two parameters to its event handler: the event object, and an object storing the image's new CSS properties (width, height, and either top or left).

$("img").on("fillsContainer", function(event, imageProperties){
    console.log(event, imageProperties);
});

Notes

  • jQuery.imagefill works with jQuery 1.4 and above.

Download on GitHub