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.

$('.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.