Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Line up images to the edge of their container (like google images) without cropping
CoffeeScript JavaScript
branch: master

README.md

jquery.fillwidth

A jQuery plugin that given a ul with images inside their lis will do some things to line them up so that everything fits inside their container nice and flush to the edges. Used throughout Artsy to make rows of images fit inside a fluid container and still stay flush without cropping the images.

Example Artsy Screenshot

See this example using placekitten.com for a basic implementation.

Usage

Create a DOM structure such as

<ul id='fill'>
  <li>
    <img>
  </li>
</ul>

Then apply the fillwidth plugin.

$('#fill').fillwidth()

Options

jquery.fillwidth takes a number of options you can pass to it's constructor.

resizeLandscapesBy { Number } (default 200)

Fillwidth will try to reduce images that are landscape (longer in width than height) up to a certain amount of pixels. Change this number to adjust the maximum amount of pixels fillwidth is allowed to reduce landscapes.

Landscape Reduce Example

resizeRowBy { Number } (default 30)

Fillwidth will try to subtly reduce the entire height of each row up to a certain amount of pixels. Change this number to adjust the maximum amount of pixels fillwidth is allowed to reduce each row by.

Row Height Reduce Example

beforeFillWidth { Function }

Pass in a callback before fillwidth does it's magic and tries to line up images

afterFillWidth { Function }

Pass in a callback right after fillwidth does it's magic and lines up images.

imageDimensions { Array }

If you know the dimensions of the child images before they finish loading, pass in an array of { width: X, height: X } hashes for a quicker fillwidth that calculates before the images finish loading. See the example for how this is done.

$('#fill').fillwidth({
  resizeLandscapesBy: 100,
  resizeRowBy: 40,
  beforeFillWidth: function() {},
  afterFillWidth: function() {},
  imageDimensions: [{ width: 100, height: 120 }]
})

To build

Fillwidth is written in coffeescript and must therefore be compiled before contributing updates.

  • Install node
  • Install node modules npm install
make build

License

MIT, see LICENSE.

Something went wrong with that request. Please try again.