Object Fit Picture Tag Polyfill

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