🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

makeCover is a jQuery plugin that makes your img tag behavior like a background with background-size:cover property.

responsive-image background-image

Documentation

jquery.makeCover

Small jQuery plugin which simulates background-size:cover with img tag

Usage

1: Required files

Link the jQuery library and the makeCover file :

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/jquery.makeCover.js"></script>

2: HTML markup

Add a class to your image or a wrapper div

<div class="cover">   <img src="image.jpg" alt="" /> </div>

3: Call the plugin

Call the plugin with the class defined in the html markup :

<script> $(document).ready(function(){   $('.cover').makeCover(); }); </script>

Options

Here's a list of available settings.

Attribute Type Default Description
positionHorizontal String center Horizontal position ('left', 'center' or 'right')
positionVertical String middle Vertical position ('top', 'middle' or 'bottom')
beforeResize Function Empty function Fires before the resize
afterResize Function Empty function Fires after the resize
Example :
$('.foo').makeCover({   'positionHorizontal': 'right',   'afterResize': function(){ alert('Bonjour'); } });

License

Copyright (C) 2016 Mehdi Ittobane

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see http://www.gnu.org/licenses/.


You May Also Like