Neolithic Programming Machine


    3.2.5 • Public • Published

    object-fit-images gzipped size build status npm CDNJS jsDelivr

    🗻 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
    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


    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

      // 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
      // an array/NodeList
      var someImages = document.querySelectorAll('img.some-image');
      // a single element
      var oneImage = document.querySelector('img.some-image');
      // or with jQuery
      var $someImages = $('img.some-image');

      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


    Pick your favorite:

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


    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


    MIT © Federico Brigante


    npm i @igari/object-fit-images

    DownloadsWeekly Downloads






    Unpacked Size

    37 kB

    Total Files


    Last publish


    • igari