Background-size: Cover Like Responsive Image Solution – CoverImage

Preview:

Description:

CoverImage is a pure JS responsive image solution which dynamically stretches and crops an image to fill its parent container on window resize. Similar to the CSS3’s Background-size: Cover property.

How to use it:

Just put the coverimage.pkgd.js file into the webpage and we’re ready to go.

<script src="dist/coverimage.pkgd.js"></script>

Wrap the image into a container with the ‘data-cover-image’ attribute as follow:

<div id="container" class="eg" data-cover-image>
  <img src="example.png" width="800" height="400">
</div>