mediaSize

npm install mediasize

Simple DOM module which replicates the css background-size attribute, but on any block element. Take a look at an example.

Setup

var mediasize = require('mediasize')

var media = mediasize($('[data-slide]'), {
  size : 'cover'
})

media.start()

Require mediaSize. You can pass either a single element or an array of elements using whatever selector method or library you prefer as the first argument. This example is using jQuery as the selector engine. The second argument contains an options object.

Testing

You can do a quick test by running npm run test. You'll need Beefy for this, which you can install by running npm install beefy -g

Options

Mode

You can set size as either cover or contain, just as you would the CSS background-size attribute.

Center

When size is set to contain and center is set to true this centers the image within the parent. When set to false the element will set top left.

Limit

When the size is set to contain and limit is set to true, prevent the image from scaling past it's original size.

Parent

The dimensions of this element will be used as the basis of the new dimensions for your primary element(s). If no element is defined we default to window.

Methods

Methods can be invoked like so:

mediasize.start();

Available methods:

start           Start listening to window resize event
refresh         Reformat everything
stop            Stop listening to window resize event