jQuery Plugin To Make IMG Act Like A Responsive Background - makeCover
File Size: | 17 KB |
---|---|
Views Total: | 664 |
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.