Scaling Any Elements Responsively With jQuery - coverfit.js
File Size: | 3.43 KB |
---|---|
Views Total: | 668 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Yet another jQuery plugin that automatically scales, crop any elements to cover their parent container similar to the CSS background-size: cover
attribute. Works with any elements such as images, videos, Youtube/Vimeo iframe based players and much more.
How to use it:
1. Import both jQuery JavaScript library and the jQuery coverfit.js script into the html page.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script> <script src="coverfit.js"></script>
2. Embed medias into your page as these:
<div class="box"> <img src="https://picsum.photos/600/450/?random" class="demo"> </div> <div class="box"> <iframe width="560" height="315" src="https://www.youtube.com/embed/iWjRCMB_mzY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="demo"></iframe> </div>
3. Initialize the plugin and we're done.
$(function(){ $('.demo').coverFit(); });
4. If you want to scale the elements while keeping the aspect ratio.
$(function(){ $('.demo').coverFit({ ratio: 1.3333 }); });
This awesome jQuery plugin is developed by matsjoonas. For more Advanced Usages, please check the demo page or visit the official website.