jQuery Plugin To Resize Images To Fit Any Container - image-cover.js
File Size: | 12.6 KB |
---|---|
Views Total: | 3042 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

image-cover.js is a jQuery based cross-browser responsive image solution that dynamically resizes an image to fill its parent container similar to the CSS background-size: cover
property.
How to use it:
1. Add either the image-cover.js
or image-cover.min.js
along with the latest jQuery library to your document.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="js/image-cover.js"></script>
2. Just call the cover()
function on the image container and done.
$('.container').cover();
3. Specify the target element using the target
options as this:
$('.container').cover({ target: '.el' });
4. More configuration options:
$('.container').cover({ // delay after window resize delay: 100, // fill, fillHeight, fillWidth, stretch scale: 'fill', // h ( center, left, right ), v ( bottom, center, top ) align: { h: 'center', v: 'center' }, /* 767: { delay: 10, scale: 'fillWidth', align: { h: 'left', v: 'bottom' }, }, 1199: { delay: 0, scale: 'stretch' } */ breakpoints: [] });
Change log:
2017-07-06
- Refactored loop to properly identify containers
2017-04-08
- Added alignment options
2017-02-23
- js update
2017-01-10
- Replaced children with find in order to traverse for the target
2017-01-06
- Fixed typos
This awesome jQuery plugin is developed by JasonMSims. For more Advanced Usages, please check the demo page or visit the official website.