jQuery Plugin To Make IMG Act Like A Responsive Background - makeCover
| File Size: | 17 KB |
|---|---|
| Views Total: | 683 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
makeCover is a jQuery plugin that makes your img tag behavior like a background with background-size:cover property. Very useful for your cross-platform websites that automatically resizes, crops and re-positions the images to fit within the viewport.
How to use it:
1. To get started, include the jQuery makeCover plugin's script after jQuery library but before the closing body tag.
<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script> <script src="jquery.makeCover.js"></script>
2. Then wrap your image into a DIV container like this:
<div class="cover"> <img src="demo.jpg"> </div>
3. Finally, just call the plugin on the DIV container and done.
$('.cover').makeCover();
4. Set the image' horizontal & vertical positions when resized.
$('.cover').makeCover({
// left, center, right
'positionHorizontal': 'center',
// top, middle, bottom
'positionVertical': 'middle',
});
5. Available callback functions which are triggered after / before the resize.
$('.cover').makeCover({
'beforeMove': null,
'afterMove': null
});
This awesome jQuery plugin is developed by classikd. For more Advanced Usages, please check the demo page or visit the official website.











