jQuery Plugin To Keep The Aspect Ratio Of Html Elements

Keep Ratio is a lightweight jQuery plugin used to keep a specific aspect ratio of an Html element in responsive web design. The plugin will automatically resize the DIV or other elements while keeping aspect ratio to fit its parent container. Check out the demo page and resize the window to see the magic.

How to use it:

1. Load the latest version of jQuery library and jQuery keep ratio plugin at the end of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="src/jquery.keep-ratio.js"></script> 

2. Create an DIV element with fixed or flexible width (height).

<div id="demo" style="width:70%"></div>

3. Call the plugin on the DIV element and specify the aspect ratio.

<script type="text/javascript">
$(function() {
$('#demo').keepRatio({ 
ratio: 16/9, 
calculate: 'height' // height or width
});
});
</script>

Change log:

2014-09-14

• Release v0.1.1

---

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