npm.io
0.0.3 • Published 9 years ago

object-fit-picture-tag-polyfill

Licence
MIT
Version
0.0.3
Deps
0
Vulns
0
Weekly
0
Stars
1
SummaryDependencyVersions

Object Fit Picture Tag Polyfill badge-size npm version

Cross browser CSS object-fit support for picture tags

  • Fast and lightweight
  • No framework dependencies
  • Works with both <picture> and <img> tags

Installation

However you like:

<script src="dist/object-fit-picture-tag-polyfill.min.js"></script>
npm install --save object-fit-picture-tag-polyfill

Usage

  1. Append your <picture> tags with either data-object-fit-cover or data-object-fit-contain

  2. Import the plugin

        import objectFitPolyfill from 'object-fit-picture-tag-polyfill';

  3. Instantiate the class and pass it any options

        new objectFitPolyfill({
        fitPosition: 'center center'
    });

  4. (optional) if you want to reinitialise the script you can call the init() method directly (after the class has been initialised)

        let polyfill = new objectFitPolyfill();

    polyfill.init();

Parameters

(fitPosition, addContainer)
parameter description
fitPosition Type: string
Default: 'center center'

The background-position of background-image
addContainer Type: boolean
Default: true

If set to true, the div which has your background-image will be wrapped in a parent div with relative positioning. The parent div will keep the class and id of your picture tag. If set to false, there will be no wrapping div and your background-image div will keep the class and id of your picture tag.

MIT Chris Boakes

Keywords

object-fites6polyfilllibrarypicture-tag