jQuery Plugin To Resize Images To Fit Any Container - image-cover.js

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

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.


3. Specify the target element using the target options as this:

  target: '.el'

4. More configuration options:


  // 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:


  • Refactored loop to properly identify containers


  • Added alignment options



  • Replaced children with find in order to traverse for the target


  • Fixed typos

This awesome jQuery plugin is developed by JasonMSims. For more Advanced Usages, please check the demo page or visit the official website.