jQuery Plugin For Flexible HTML Elements - tailorfit

jQuery Plugin For Flexible HTML Elements - tailorfit
File Size: 166 KB
Views Total: 358
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

See also:

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.