Keep A Fixed Aspect Ratio With JavaScript - CZ-Ratio

CZ-Ratio is a JavaScript (jQuery) solution to set and maintain the aspect ratio of an element regardless of the window size.

How to use it:

1. To use the plugin, include the JavaScript CZ-Ratio_jQuery.js after jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/CZ-Ratio_jQuery.js"></script>

2. Call the function CZRatio to the target element and set the aspect ratio you want to use.

<div class="test">
  Element Here
</div>

$(function(){

  $('.test').CZRatio({
    ratio: '4-3'
  });

});

3. Set the keep parameter used to calculate the aspect ratio. Possible values:

• 'w': width
• 'h': height
• 'l': longer
• 's': shorter

$(function(){

  $('.test').CZRatio({
    ratio: '4-3',
    keep: 'w'
  });

});

---

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