image-cover.js

Lightweight jQuery plugin to emulate background-size: cover for img's

Usage

Simply include jQuery and image-cover

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="js/image-cover.min.js"></script>

And initialize the plugin on the image container inside of $(document).ready

$(document).ready(function() {
  $('.container').cover();
});

Options

• target - change the target element to resize
• delay -ms to delay after window resize - has no effect if the browser supports object-fit
• scale ( fill, fillHeight, fillWidth, stretch )
• align - object containing two properties: h ( center, left, right ), v ( bottom, center, top )
• breakpoints - responsive breakpoints

$('.container').cover({
  target: 'div.not-image'
  delay: 50,
  scale: 'fill',
  align: {
    h: 'center',
    v: 'center'
  },
  breakpoints: {
    767: {
      delay: 10,
      scale: 'fillWidth',
      align: {
        h: 'left',
        v: 'bottom'
      },
    },
    1199: {
      delay: 0,
      scale: 'stretch'
    }
  }
});