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

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:

2018-01-17

• small refactory

2018-01-16

• small fix: removed redoundant loaded condition

2018-01-13

• small fixes.

2018-01-11

• niteContain(), an extra method to "contain" (not crop) elements

2017-12-23

• nite.js specs for inViewport func changed

2017-12-05

• v1.0.0

2017-11-17

• nitejs new events spec

2017-11-09

• crop core function is now private

2017-11-08

• event specs changed

2017-10-31

• translate3d is now used only when needed (parallax opts)

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.