https://github.com/threespot/object-fit-image
“object-fit” polyfill for images
https://github.com/threespot/object-fit-image
Last synced: 11 months ago
JSON representation
“object-fit” polyfill for images
- Host: GitHub
- URL: https://github.com/threespot/object-fit-image
- Owner: Threespot
- License: mit
- Created: 2018-03-26T03:33:56.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-09-04T21:06:19.000Z (almost 6 years ago)
- Last Synced: 2025-07-08T09:18:55.003Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 615 KB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `object-fit` Image Polyfill
[](https://www.npmjs.com/package/@threespot/object-fit-image)
[](https://travis-ci.org/Threespot/object-fit-image)
[](https://coveralls.io/github/Threespot/object-fit-image)
Polyfills `object-fit: cover` on `![]()
` or `` tags by applying the `src` as an inline “background-image” on a target wrapper. Required for IE 11- and Android 4.4-. We recommend using [Picturefill](https://scottjehl.github.io/picturefill) to polyfill the `` element itself.
## Install
```bash
yarn add @threespot/object-fit-image
```
## Usage
**Markup**
```html
```
```js
import ObjectFitImage from "@threespot/object-fit-image";
var imageWrappers = document.querySelectorAll(".bg-image");
imageWrappers.forEach(el => new ObjectFitImage(el));
// With custom options
imageWrappers.forEach(el => new ObjectFitImage(el, {
visuallyHiddenClass: "vh",
backgroundPosition: "50% 0"
}));
```
Example styles for browsers that support `object-fit`:
```scss
.bg-image {
display: block;// for elements
position: relative;
&-source {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
}
```
**Additional markup examples**
```html
```
## License
This is free software and may be redistributed under the terms of the [MIT license](https://github.com/Threespot/object-fit-image/blob/master/LICENSE.md).
## About Threespot
Threespot is an independent digital agency hell-bent on helping those, and only those, who are committed to helping others. Find out more at [https://www.threespot.com](https://www.threespot.com).
[](https://www.threespot.com)