Notoriously Psychedelic Modules
    Have ideas to improve npm?Join in the discussion! »

    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

    3

    Version

    0.0.3

    License

    MIT

    Last publish

    Collaborators

    • avatar