Nihilist Postmodern Mistake
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    object-fit-imagespublic

    object-fit-images gzipped size Travis build status npm version CDNJS version

    🗻 Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari, ...

    • Fast and lightweight (demo)
    • No additional elements are created
    • Setup is done via CSS
    • Scaling is taken care by the browser (it uses background-size)
    • srcset support
    • src and srcset properties and attributes keep working: img.src = 'other-image.jpg'

    Alternative solutions

    Comparison bfred-it
    /object-fit-images🌟
    constancecchen
    /object-fit-polyfill
    tonipinel
    /object-fit-polyfill
    Browsers IEdge 9-14, Android<5, Safari<10 <- Same "All browsers"
    Tags img image video picture img
    cover/contain 💚 💚 💚
    fill 💚 💚 💚
    none 💚 💚 💚
    scale-down 💚 using {watchMQ:true} 💚 💔
    object-position 💚 💚 💔
    srcset support 💚 Native or picturefill notes 💚 💔
    Extra elements 💚 No 💔 Yes 💔 Yes
    Settings 💚 via CSS 💔 via HTML 💔 via HTML

    Usage

    You will need 3 things

    1. one or more <img> elements with src or srcset

      <img class='your-favorite-image' src='image.jpg'>
    2. CSS defining object-fit and a special font-family property to allow IE to read the correct value

      .your-favorite-image {
          object-fit: contain;
          font-family: 'object-fit: contain;'
      }

      or, if you also need object-position

      .your-favorite-image {
          object-fit: cover;
          object-position: bottom;
          font-family: 'object-fit: cover; object-position: bottom;'
      }

      To generate the font-family automatically, you can use the PostCSS plugin or the SCSS/SASS/Less mixins.

      If you set the font-family via javascript (which must be followed by calling objectFitImages()), make sure to include the quotes in the property.

    3. the activation call before </body>, or on DOM ready

      objectFitImages();
      // if you use jQuery, the code is: $(function () { objectFitImages() }); 

      This will fix all the images on the page and also all the images added later (auto mode).

      Alternatively, only fix the images you want, once:

      // pass a selector 
      objectFitImages('img.some-image');
      // an array/NodeList 
      var someImages = document.querySelectorAll('img.some-image');
      objectFitImages(someImages);
      // a single element 
      var oneImage = document.querySelector('img.some-image');
      objectFitImages(oneImage);
      // or with jQuery 
      var $someImages = $('img.some-image');
      objectFitImages($someImages);

      You can call objectFitImages() on the same elements more than once without issues, for example to manually request an update of the object-fit value.

    Apply on resize

    You don't need to re-apply it on resize, unless:

    In one of those cases, use the watchMQ option:

    objectFitImages('img.some-image', {watchMQ: true});
    // or objectFitImages(null, {watchMQ: true}); // for the auto mode 

    Install

    Pick your favorite:

    <script src="dist/ofi.min.js"></script>
    <!-- CDN is also available, but I suggest you concatenate JS files instead -->
    <!-- Visit https://cdnjs.com/libraries/object-fit-images -->
    npm install --save object-fit-images
    var objectFitImages = require('object-fit-images');
    import objectFitImages from 'object-fit-images';

    API

    objectFitImages(images, options)

    Both parameters are optional.

    parameter description
    images Type: string, element, array, NodeList, null
    Default: null

    The images to fix. More info in the Usage section
    options Type: object
    Default: {}
    Example: {watchMQ:true}

    watchMQ Type: boolean
    Default: false

    This enables the automatic re-fix of the selected images when the window resizes. You only need it in some cases

    License

    MIT © Federico Brigante

    install

    npm i object-fit-images

    Downloadslast 7 days

    17,552

    version

    3.2.3

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar