Scaling Any Elements Responsively With jQuery - coverfit.js

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.