From 89662ac69a9ed073bddb04453e459b01829dcfdd Mon Sep 17 00:00:00 2001 From: constancecchen Date: Sat, 24 Jun 2017 21:58:05 -0700 Subject: [PATCH] Update README; upversion --- README.md | 28 +++++++++++++++++++++++++--- bower.json | 2 +- package.json | 2 +- 3 files changed, 27 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 964cb22..def9e2f 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ A polyfill for browsers that don't support the `object-fit` CSS property. Unsure ## Features -- Lightweight - 2.6KB (1.7KB with the basic version) +- Lightweight - 2.8KB (1.8KB with the basic version) - Vanilla Javascript - works with or without jQuery - Supports IE 9+, iOS 7-, and Android 4.4- - Supports `object-position` @@ -19,7 +19,9 @@ You can check out the [bare-bones demo here](http://constancecchen.github.io/obj Unlike [object-fit-images](https://github.com/bfred-it/object-fit-images) or [Primož Cigler's method](https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3#.17fpxgk0w) (both excellent alternatives if you'd rather not use this one), this polyfill does not set a background image on the parent container, but instead resizes and repositions the image (using inline CSS for height, width, absolute positioning, and negative margins). -The polyfilled item will get the class `object-fit-polyfill` if styling-issues are occuring. +The polyfilled item will receive the class `object-fit-polyfill` if styling issues occur that require overrides. + +## Why bother? If you're wondering: why bother using `` tags versus `background-image`? Here's a couple reasons: @@ -75,7 +77,7 @@ If you're only interested in using the basic polyfill (which assumes `object-fit ```html
- +
@@ -93,6 +95,26 @@ bower install objectFitPolyfill npm install objectFitPolyfill ``` +## Advanced usage + +If you need to dynamically call the polyfill on the fly for any reason (for example, carousels or lazy-loaded images), you can do so quite easily: + +```js +// Rerun the polyfill on all elements with the data attribute +objectFitPolyfill(); + +// Rerun the polyfill on a single DOM node +var element = document.querySelector('.foo'); +objectFitPolyfill(element); + +// Rerun the polyfill on multiple elements +var elements = document.querySelectorAll('.bar'); +objectFitPolyfill(elements); + +// Rerun the polyfill with a jQuery selector +objectFitPolyfill($('.baz')); +``` + ## Requests? If you'd like to make feature requests such as IE 8- or adding object-position support for Safari, feel free to open an issue or pull request! It's doable and on my radar, but I probably won't get to it without some prodding. diff --git a/bower.json b/bower.json index f138684..c4a0e27 100644 --- a/bower.json +++ b/bower.json @@ -20,5 +20,5 @@ "test", "tests" ], - "version": "2.0.4" + "version": "2.0.5" } diff --git a/package.json b/package.json index 748382b..c7abcd5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "objectFitPolyfill", - "version": "2.0.4", + "version": "2.0.5", "description": "A Javascript polyfill for browsers that don't support the object-fit CSS property", "main": "dist/objectFitPolyfill.min.js", "keywords": [