object-fit-images
Advanced tools
object-fit-images - npm Package Compare versions
Comparing version 2.0.0 to 2.0.1
@@ -13,3 +13,3 @@ (function (root, factory) { | ||
| // only IE is supported via .runtimeStyle | ||
| var isSupported = false; | ||
| var isSupported = 'object-fit' in document.createElement('i').style; | ||
@@ -16,0 +16,0 @@ function getStyle (el) { |
| { | ||
| "name": "object-fit-images", | ||
| "version": "2.0.0", | ||
| "version": "2.0.1", | ||
| "description": "Adds support to object-fit to images on IE9, IE10, IE11, Edge and other old browsers.", | ||
@@ -35,4 +35,3 @@ "license": "MIT", | ||
| "build": "uglifyjs --mangle toplevel ofi.js > ofi.min.js", | ||
| "demo": "browser-sync start --server --index 'demo.html' --files '*'", | ||
| "prepublish": "npm run build" | ||
| "demo": "browser-sync start --server --index 'demo.html' --files '*'" | ||
| }, | ||
@@ -39,0 +38,0 @@ "devDependencies": { |
@@ -9,6 +9,7 @@ # object-fit-images [](#readme) | ||
| - The code is light on the CPU | ||
| - No other elements are created to make it work | ||
| - CPU-light code | ||
| - No additional elements are created or necessary | ||
| - Once set, position is taken care by the browser | ||
| - You can normally get and set the `<img>`'s `src` attribute: `img.src = 'other-image.jpg'` | ||
| - `srcset` support | ||
@@ -21,3 +22,3 @@ ## Comparison table with alternative solutions | ||
| :--- | :--- | :--- | :--- | ||
| Browsers | "All browsers" | "All browsers" | IE 8-11, Edge | ||
| Browsers | IEdge 9-14, Android 4.4.4-, possibly others | "All browsers" | IE 8-11, Edge | ||
| Tags | `img` | `img` | `img`, `video` | ||
@@ -31,28 +32,4 @@ `cover/contain` | 💚 | 💚 | 💚 | ||
| ### Performance | ||
| Performance and ease of use considerations in [detailed-support-tables.md](detailed-support-tables.md#additional-comparisons-with-alternatives) | ||
| | | object-fit-images | [tonipinel/object-fit-polyfill](https://github.com/tonipinel/object-fit-polyfill) | [jonathantneal/fitie](https://github.com/jonathantneal/fitie) | ||
| :--- | :--- | :--- | :--- | ||
| Size | 1.3KB | 1.8KB | 1.5KB | ||
| Update wait | 💚 No wait, applied before image load | 💚 No wait, applied before image load | 💔 Wait until full image load | ||
| Additional DOM elements necessary | 💚 No | 💔 Yes, a wrapping element is added | 💔 Yes, a wrapping element is added | ||
| Performance overhead | 💰 | 💰💰💰 | 💰💰 | ||
| Technique description | Transparent `src` image; Image in `<img>`'s `background` | Wrapper element with style copied from `<img>`; CSS+JS positioning; Original `<img>` hidden | Wrapper element with style copied from `<img>`; JS positioning | ||
| ### Ease of use | ||
| | | object-fit-images | [tonipinel/object-fit-polyfill](https://github.com/tonipinel/object-fit-polyfill) | [jonathantneal/fitie](https://github.com/jonathantneal/fitie) | ||
| :--- | :--- | :--- | :--- | ||
| Object-fit definition | 💛 In CSS, via `font-family` property [*](#usage) | 💔 Via `data` attribute in HTML (`data-object-fit="cover"`) | 💔 Via class in HTML (`class="cover"`) | ||
| Support changes in `@media` query | 💚 Optional, with `{watchMQ:true}` | 💔 No | 💔 No | ||
| Updates on resize | 💚 Unnecessary | 💚 Unnecessary | 💔 Yes, manually | ||
| Fix new elements automatically | 💚 Optional, with `objectFitImages()` or `objectFitImages(false)` | 💔 Impossible | 💛 Manually | ||
| `<img>` `src` changes | 💚 Automatically reflected | 💔 Image not updated at all | 💔 Fix not updated | ||
| Other limitations | 💔 Any `onload` events on `<img>` will fire again when it fixes | 💚 I didn't find any | 💔 Some CSS declaration might be broken because partially moved to the wrapper | ||
| Runner-ups: | ||
| - [anselmh/object-fit](https://github.com/anselmh/object-fit) is deprecated, doesn't support Edge and clocks in at 14KB. | ||
| - [@primozcigler/neat-trick](https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3) requires jQuery and Modernizr, + more cons similar to the other two. | ||
| ## Usage | ||
@@ -76,5 +53,5 @@ | ||
| A PostCSS plugin *could* also be developed to automatically add this `font-family` property. | ||
| A PostCSS plugin [*could* also be developed](https://github.com/bfred-it/object-fit-images/issues/1) to automatically add this `font-family` property. | ||
| There are already SCSS/SASS/Less mixins in the [`preprocessor`](/preprocessors) folder to create that `font-family` automatically, like this: | ||
| There are some SCSS/SASS/Less mixins in the [`preprocessor`](/preprocessors) folder to create that `font-family` automatically, like this: | ||
@@ -86,3 +63,2 @@ ```scss | ||
| ### JS | ||
@@ -94,3 +70,2 @@ | ||
| objectFitImages(); | ||
| // or objectFitImages(false) | ||
| ``` | ||
@@ -97,0 +72,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
Improved metrics
- Number of medium maintenance alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-24.54%
11224
- Number of lines in readme file
- decreased by-15.62%
135