jQuery Plugin For Flexible HTML Elements - tailorfit

tailorfit is a simple jQuery plugin for automatically adjusting html element's width, height, alignment and offset to fit in a container.

See also:

• Resize Images To Fit In A Container - imgLiquid
• FitText - Flexible Font Size Plugin

How to use it:

1. Include jQuery library and jQuery tailorfit on your html page

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="tailorfit-1.5.9.min.js"></script>

2. Markup

<div id="image-container"><img src="demo-image.jpg"></div>

3. Call the plugin with options

<script>
$('#parent > img').load(function(){
$(this).tailorfit({
maxWidth  : this.width,
maxHeight : this.height,
ratio     : this.width / this.height
});
});
</script>

4. More options

• max-width (expr)
• max-height (expr)
• aspect-ratio (expr)
• x-offset (expr)
• y-offset (expr)
• h-position (left | center | right)
• v-position (top | center | bottom)
• rounding-method (round | floor | ceiling)
• overflow (contain | crop)

---

This awesome jQuery plugin is developed by rtheunissen. For more Advanced Usages, please check the demo page or visit the official website.