Keep A Fixed Aspect Ratio With JavaScript - CZ-Ratio

Keep A Fixed Aspect Ratio With JavaScript - CZ-Ratio
File Size: 4.06 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.