<ul id='fill'>
<li>
<img>
</li>
</ul>
3. JAVASCRIPT
$('#fill').fillwidth();
4. OPTION
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](https://camo.githubusercontent.com/3ae32cceca5cd7c92466df1500825aacbb6464f2/687474703a2f2f636c2e6c792f696d6167652f3036314a33793167324332552f496d616765253230323031322e31322e3033253230333a32373a3537253230504d2e706e67)
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](https://camo.githubusercontent.com/38363b6be53c6281300ced1c512d9c1da89415b2/687474703a2f2f636c2e6c792f696d6167652f3242336132313237333330612f496d616765253230323031322e31322e3033253230333a33383a3431253230504d2e706e67)
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.
$('#fill').fillwidth({
resizeLandscapesBy: 100,
resizeRowBy: 40,
beforeFillWidth: function() {},
afterFillWidth: function() {},
imageDimensions: [{ width: 100, height: 120 }]
});