jQuery Plugin To Set Aspect Ratio Of An Element
File Size: | 2.2 KB |
---|---|
Views Total: | 818 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A very small jQuery plugin for your web layout that can be used to responsively maintain the aspect ratio of a DIV element on page resize.
How to use it:
1. Add jQuery JavaScript library and the plugin's main script to the html page.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="com.abcruz.jquery.aspect-ratio.js"></script>
2. The JavaScript to set the aspect ratio of an element you specify.
<div id="demo-div"></div>
$('#demo-div').set_aspect_ratio({ 'aspect': 0.75 });
3. The JavaScript to maintain the aspect ratio on window resize.
$(window).resize( function() { $('#demo-div').set_aspect_ratio({ 'aspect': 0.75 }); });
4. Apply additional CSS styles to the DIV element.
$('#demo-div').set_aspect_ratio({ 'aspect': 0.75, 'css': { 'margin':'50px auto' // more CSS rules here }, });
5. Set the init width of the DIV element relative to its parent container.
$('#demo-div').set_aspect_ratio({ 'aspect': 0.75, 'base_width': .5 // 0 - 1 });
6. Set the pixels to trim from calculated width.
$('#demo-div').set_aspect_ratio({ 'aspect': 0.75, 'trim': 0 });
This awesome jQuery plugin is developed by samhain13. For more Advanced Usages, please check the demo page or visit the official website.