imgCoverEffect

Pure JavaScript solution for simulating CSS 'background-size: cover' on HTMLImageElement with optional alignments and DOM resize watcher.

Syntax

imgCoverEffect(HTMLImageElement [, options]);

Here the options is an extra object with the following available properties and values:

    alignX:      'left'(default) | 'center' | 'right'    // horizontal alignment
    alignY:      'top' (default) | 'middle' | 'bottom'   // vertical alignment
    watchResize:  true (default) |  false                // automatic DOM resize watcher

watchResize option is turned on by default, which means the image will automatically adapt to fit its parent DOM element whenever its size changes. It's done using requestAnimationFrame.

IMPORTANT: Make sure to disable the watcher when calling imgCoverEffect(...) from within parent's resize function to avoid multiple extra calls.

Browsers Support

IE7+ and major browsers.

Examples

Use with a newly created by Javascript Image element:

var img = new Image();         // our future background image
img.src = 'pathToImg';
document.body.appendChild(img);

imgCoverEffect(img, {
  alignX: 'center',
  alignY: 'middle'
});

Use with an already existing HTMLImageElement:

var img = document.getElementById('imgID');

imgCoverEffect(img, {
  alignX: 'right',
  alignY: 'bottom'
  watchResize: false    // suppose the function explicitly called on parent resize 
});

Installation

bower install imgCoverEffect
npm install img-cover-effect