jQuery Plugin To Make Images Behavior Like Backgrounds - coverimage

File Size: 3.07 KB
Views Total: 944
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Make Images Behavior Like Backgrounds - coverimage

coverimage is a lightweight, cross-browser jQuery plugin for responsive web design that makes the regular images behavior like the CSS background-size : cover attribute. The plugin will dynamically resize/crop your images and make them always be centered no matter you resize the browser window.

How to use it:

1. Add your image into a parent DIV container like this:

<div class="parent">
  <img src="1.jpg" alt="Image">
</div>

2. Download the plugin and include the jquery.coverimage.js script along with jQuery library at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.coverimage.js"></script>

3. Attach the plugin to the image. That's it. The plugin will automatically resize and center the image inside the DIV container '.parent' on window resize.

$('.parent img').coverImage();

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