Lines up a single row of images to fit their container.

Downloads in past


201.0.87 years ago9 years agoMinified + gzip package size for jquery-fillwidth-lite in KB


Lines up a single row of images to fit their container. Like a simpler + dumber version of https://github.com/craigspaeth/jquery.fillwidth.


````javascript jqueryFillwidthLite($, , imagesLoaded) $('#el').fillwidthLite() ````
With more options
````javascript var jqueryFillwidthLite = require('jquery-fillwidth-lite'); jqueryFillwidthLite($,
, imagesLoaded) $('#el').fillwidthLite({
// What height you want to aim for the image to be targetHeight: 500,
// By default this will just line the images up so they're // squeezed together. You may want to do something different like // add some margin in between them. This gives you a hook so you // can access the img object that looks something like this: // { // $el: // The DOM element // width: // The width the $el should be // height: // The height the $el was calculated to be after fillwidth // } apply: function(img, i, gutterSize) {
img.$el.width(img.width).css({ 'margin-right': '15px' })
// If you're going to add gaps via margin or padding in apply be // sure to specify how much per-image here. gutterSize: 15,
// A callback for after the fillwidthing has finished done: function() {
} }) ````
See example.html for a working example.


  • Better docs
  • Host example on gh-pages
  • Tests
  • Remove underscore and imagesloaded dependencies. Maybe jQuery eventually.
  • Refactor to plain Javascript source

If you are at all interested in using this plugin please leave an issue bugging me about it and I will get on these right away.


Please fork the project, build the changes npm run build, and submit a pull request.