Resize Block Elements To Fit Parent Container - jQuery nite-cropper
File Size: | 38.4 KB |
---|---|
Views Total: | 1378 |
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:
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.