Keep A Fixed Aspect Ratio With JavaScript - CZ-Ratio

File Size: 4.06 KB
Views Total: 651
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<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

    ratio: '4-3'


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

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

    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.