This time I will share jQuery Plugin and tutorial about Get/Set/Keep The Ratio Aspect Of An Element – jQuery KeepRatio, hope it will help you in programming stack.
The jQuery KeepRatio library provides 3 methods to set, get, and keep the aspect ratio of a DOM element.
Great for responsive design that keeps your element with the same aspect ratio on different screens.
How to use it:
1. Insert the JavaScript file keep-ratio.js after jQuery.
2 |
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
3 |
crossorigin="anonymous"> |
5 |
<script src="js/keep-ratio.js"></script> |
2. Set the aspect ratio.
1 |
var $els = $( ".box" ); |
3. Keep the current aspect ratio.
1 |
var $els = $( ".box" ); |
4. Outpu the aspect ratio in the console.
1 |
var $els = $( ".box" ); |
2 |
console.log( "keepRatio", $els ); |
5. Restore the aspect ratio.
6. You can also set the aspect ratio in the data attribute:
This awesome jQuery plugin is developed by Cygraph. For more Advanced Usages, please check the demo page or visit the official website.
