Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

object-fit-picture-tag-polyfill

0.0.3 • Public • Published

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

Install

npm i object-fit-picture-tag-polyfill

DownloadsWeekly Downloads

1

Version

0.0.3

License

MIT

Last publish

Collaborators

  • avatar