3.2.4 β€’ Published 7 years ago

object-fit-images v3.2.4

Weekly downloads
389,096
License
MIT
Repository
github
Last release
7 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-2364ilive-ui-kitwagcontentwss-iviewwss-iview-test@bolid/mcqueen-react@campj/theme@canopycanopycanopy/b-ber-reader-reactkenshinkk-gatsby-themeheilbaum-ionic-object-fit-imageslinknmalley-prairiemastic-polyfills@wide/polyfiller@wecity/tdesign-vue-ie@triz/core-assets@thumbtack/thumbprint-react@tutor2u/tutor2u-ui@zalastax/nolb-object-@telia/styleguide-webaztech-mountain@goldinteractive/feature-object-fit@atyoursite/npm-library@acanto/frontend@acanto/core-img@edekadigital/backoffice-ui@convertdigital/seleneterra-imagetriz-core-assets@brendan-kooba/kooba-base-styles@mpjsz/components@portal-site/components@pageboard/elements-semantic-ui@seamonster-studios/react-componentsmillsreact-last-imageninelines-rbc-templateninelines-template-styleportal-elementssky-cropgi-feature-object-fitgi-feature-object-fit-imagescommunitytemplatecude-cmsbasiq-react-componentsbase-gelectra-kgp-standard-gelbgelectra-kgp-standard-gelbgatsby-imagegedk-commonelement-lite-starter-kitfilerobot-image-annotator@solislab/selene@sparkdesignsystem/spark@sparkdesignsystem/spark-highlight-board@deepvision/vueuikit@jetshop/ui@appearhere/bloom@foeewni/web-core@emilyhsia/themebau@ffc-sync/theme@mdfx/image-progressive-loader@dpc-sdp/ripple-global@kozimo/blockz-react@lukemackenzie/cj-theme@norceio/ui@noths/storefront@olmokit/core
3.2.4

7 years ago

3.2.3

8 years ago

3.2.2

8 years ago

3.2.1

8 years ago

3.2.0

9 years ago

3.1.3

9 years ago

3.1.2

9 years ago

3.1.1

9 years ago

3.1.0

9 years ago

3.0.1

9 years ago

3.0.0

9 years ago

3.0.0-0

9 years ago

2.5.9

9 years ago

2.5.8

9 years ago

2.5.7

9 years ago

2.5.6

9 years ago

2.5.5

9 years ago

2.5.4

9 years ago

2.5.3

9 years ago

2.5.2

9 years ago

2.5.1

9 years ago

2.5.0

9 years ago

2.4.2

9 years ago

2.4.1

9 years ago

2.4.0

9 years ago

2.3.3

9 years ago

2.3.2

9 years ago

2.3.1

9 years ago

2.3.0

10 years ago

2.2.2

10 years ago

2.2.1

10 years ago

2.2.0

10 years ago

2.1.0

10 years ago

2.0.1

10 years ago

2.0.0

10 years ago

1.1.0

10 years ago

1.0.2

10 years ago

0.9.9

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago

0.5.4

10 years ago

0.5.3

10 years ago

0.5.2

10 years ago

0.5.1

10 years ago

0.5.0

10 years ago