https://github.com/liquidlight/for-fit-sake
⛔️ DEPRECATED - A jQuery object-fit polyfill for Internet Explorer and Edge
https://github.com/liquidlight/for-fit-sake
archived deprecated obsolete
Last synced: about 1 month ago
JSON representation
⛔️ DEPRECATED - A jQuery object-fit polyfill for Internet Explorer and Edge
- Host: GitHub
- URL: https://github.com/liquidlight/for-fit-sake
- Owner: liquidlight
- Created: 2017-04-07T09:19:35.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2024-01-17T10:26:51.000Z (over 2 years ago)
- Last Synced: 2025-12-26T13:39:01.923Z (6 months ago)
- Topics: archived, deprecated, obsolete
- Language: JavaScript
- Homepage:
- Size: 18.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
[](http://unmaintained.tech/)
# DEPRECATED
This is no longer supported, please consider using the CSS property [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) instead.
# For Fit Sake
> A jQuery `object-fit` polyfill for Internet Explorer and Edge
**For Fit Sake** is a polyfill for browsers that [do not support](http://caniuse.com/#feat=object-fit) the CSS property `object-fit`. Inspired by [this Medium post](https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3), currently the only requirement is **jQuery**.
The plugin will only currently `object-fit` images (we've yet to encounter a use case where it would be anything else). It already includes the `Modernizr` check, so no extra libraries are needed.
It works by applying the image as a background image in unsupported browsers to it's parent so you can use `background-size`.
## Configuration
`forFitSake` has only two configuration options:
| Parameter | Default | Description |
|--------------------|-------------------|-------------------------------------------------------------------------------------------------------|
| `class` | `'hasForFitSake'` | The class applied to the element if it does not support `object-fit` (without the `.`) |
| `includeDetection` | `true` | Whether to include the Modernizr detection (only set to false if you have already included Modernizr) |
| `debug` | `false` | Bypass Modernizr and apply the background image no matter what (will console log) |
e.g.
```javascript
$('div').forFitSake({
class: 'hasForFitSake',
includeDetection: true,
debug: true
});
```
## Example
HTML:
```html
```
CSS:
```css
.parent {
width: 12rem;
height: 12rem;
background-position: center;
background-size: cover; /* Should match the object-fit prop */
}
.parent img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.hasForFitSake img {
visibility: hidden;
}
```
JS:
_The selector is the parent containing the image_
```javascript
$('.parent').forFitSake();
```
## Contributing
We welcome pull requests and issues!
If making a PR, it would be handy if you could please run `npm run dist` before committing and pushing. To run this you will need `uglifyjs` installed as a global module.
If you can't run it, don't let it put you off - we'll run it our end 😀