3.2.4 β€’ Published 6 years ago

object-fit-images v3.2.4

Weekly downloads
389,096
License
MIT
Repository
github
Last release
6 years ago

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

Comparisonbfred-it/object-fit-images🌟constancecchen/object-fit-polyfilltonipinel/object-fit-polyfill
BrowsersIEdge 9-14, Android<5, Safari<10<- Same"All browsers"
Tagsimgimage video pictureimg
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:

  • You're using scale-down, or
  • your media queries change the value of object-fit, like this

    	```css
    	                            img { object-fit: cover; }
    	@media (max-width: 500px) { img { object-fit: contain; } }
    	```

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.

License

MIT Β© Federico Brigante

@democrance/polyfills@zaneray/cornerstonereact-mini-virtrual-list@piotrowiczmateusz/common-modules@htmlfactory.cz/frontend-starter@cocolist/thumbprint-react@njradford/libsgrunt-frontend-starter@yumastudio/blockx-react@knitkode/core-img4game-ui@kozimo/kocoon-reactmuilessium@infinitebrahmanuniverse/nolb-object-@everything-registry/sub-chunk-2364linknkk-gatsby-themekenshinilive-ui-kitninelines-rbc-templateninelines-template-stylemillsmalley-prairiemastic-polyfillselement-lite-starter-kitepfl-elementsgi-feature-object-fitgi-feature-object-fit-imagesfilerobot-image-annotatorgelectra-kgp-standard-gelbgedk-commongatsby-imageheilbaum-ionic-object-fit-imagesportal-elementsreact-last-image@emilyhsia/themebau@goldinteractive/feature-object-fit@foeewni/web-core@ffc-sync/theme@jetshop/uiwagcontent@mdfx/image-progressive-loadertriz-core-assets@lukemackenzie/cj-themewss-iviewwss-iview-test@edekadigital/backoffice-uiterra-imagesky-crop@noths/storefront@norceio/ui@olmokit/core@portal-site/components@sparkdesignsystem/spark@sparkdesignsystem/spark-highlight-board@solislab/selene@thumbtack/thumbprint-react@pageboard/elements-semantic-ui@tutor2u/tutor2u-ui@telia/styleguide-web@seamonster-studios/react-components@wide/polyfiller@wecity/tdesign-vue-ie@triz/core-assets@zalastax/nolb-object-aztech-mountain@appearhere/bloombase-gelectra-kgp-standard-gelbbasiq-react-components@acanto/frontend@acanto/core-img@atyoursite/npm-library@brendan-kooba/kooba-base-styles@bolid/mcqueen-react@canopycanopycanopy/b-ber-reader-react@campj/themecommunitytemplate@deepvision/vueuikit@convertdigital/selene@dpc-sdp/ripple-globalcude-cms
3.2.4

6 years ago

3.2.3

7 years ago

3.2.2

7 years ago

3.2.1

7 years ago

3.2.0

7 years ago

3.1.3

7 years ago

3.1.2

7 years ago

3.1.1

7 years ago

3.1.0

7 years ago

3.0.1

7 years ago

3.0.0

7 years ago

3.0.0-0

7 years ago

2.5.9

7 years ago

2.5.8

7 years ago

2.5.7

7 years ago

2.5.6

8 years ago

2.5.5

8 years ago

2.5.4

8 years ago

2.5.3

8 years ago

2.5.2

8 years ago

2.5.1

8 years ago

2.5.0

8 years ago

2.4.2

8 years ago

2.4.1

8 years ago

2.4.0

8 years ago

2.3.3

8 years ago

2.3.2

8 years ago

2.3.1

8 years ago

2.3.0

8 years ago

2.2.2

8 years ago

2.2.1

8 years ago

2.2.0

8 years ago

2.1.0

8 years ago

2.0.1

8 years ago

2.0.0

8 years ago

1.1.0

8 years ago

1.0.2

8 years ago

0.9.9

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago

0.5.4

8 years ago

0.5.3

8 years ago

0.5.2

8 years ago

0.5.1

8 years ago

0.5.0

8 years ago