Background-size: Cover Like Responsive Image Solution – CoverImage

Category: Image , Javascript | April 11, 2017
Author:thisislawatts
Views Total:368 views
Official Page:Go to website
Last Update:April 11, 2017
License:MIT

Preview:

Background-size: Cover Like Responsive Image Solution – CoverImage

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>

You Might Be Interested In:


Leave a Reply