Resize Block Elements To Fit Parent Container - jQuery nite-cropper

Resize Block Elements To Fit Parent Container - jQuery nite-cropper
File Size: 12.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

The jQuery nite-cropper plugin automatically stretches, shrinks and crops any block elements to fit their parent container depending on the viewport size. Similar to the CSS background-size: cover but it works on any elements such like images, videos, divs, and etc.

How to use it:

1. Link to jQuery library and the jQuery nite-cropper plugin in the document.

<script src="jquery.min.js"></script>
<script src="jquery.nite.cropper.js" ></script>

2. Wrap the block elements into DIV containers as these.

<div class="crop">
  <img class="crop__target" src="1.jpg">
</div>

<div class="crop">
  <div class="crop__target">
    ...
  </div>
</div>

<div class="crop">
  <div class="crop__target">
    <video>
      ...
    </video>
  </div>
</div>

...

3. Enable the plugin by calling the function as this:

$('.crop').niteCrop({
  elements : '.crop__target'
});

4. The plugin also comes with a parallax effect as you scroll down the page. To achieve this:

<div class="parallax_area" id="debug_this">
  <div class="crop"data-nite-cropper-parallax-depth="0.5">
    <img class="crop__target" src="1.jpg">
  </div>
</div>
$('.crop').niteCrop({
  elements : '.crop__target',
  parallax : 'vertical' // or 'horizontal'
});

5. Set the fixed height/width of the block elements.

$('.crop').niteCrop({
  width       : null,
  height      : null
});

Change log:

2017-10-12

  • new nitejs version supported

2017-10-04

  • ClientRect read-only object error fixed

This awesome jQuery plugin is developed by memob0x. For more Advanced Usages, please check the demo page or visit the official website.