jQuery Plugin To Set Aspect Ratio Of An Element

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.