PHPackages                             blobfolio/blobject-fit - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. blobfolio/blobject-fit

AbandonedArchivedComponent[Utility & Helpers](/categories/utility)

blobfolio/blobject-fit
======================

A lightweight, dependency-free object-fit polyfill.

v1.5.1(8y ago)115[1 issues](https://github.com/Blobfolio/blobject-fit/issues)WTFPLJavaScript

Since Nov 5Pushed 7y ago2 watchersCompare

[ Source](https://github.com/Blobfolio/blobject-fit)[ Packagist](https://packagist.org/packages/blobfolio/blobject-fit)[ Docs](https://github.com/Blobfolio/blobject-fit)[ RSS](/packages/blobfolio-blobject-fit/feed)WikiDiscussions master Synced 4w ago

READMEChangelog (3)Dependencies (1)Versions (4)Used By (0)

blobject-fit
============

[](#blobject-fit)

A lightweight, dependency-free `object-fit` polyfill.

##### Table of Contents

[](#table-of-contents)

1. [Features](#features)
2. [Requirements](#requirements)
3. [Installation](#installation)
4. [License](#license)

Features
--------

[](#features)

blobject-fit provides fallback support for images with `object-fit: cover` and `object-fit: contain` styles via `background-size: cover` and `background-size: contain` respectively.

`object-position` is supported if the values are keywords like `"top"` or `"center"`, e.g. `object-position: top right`, via `background-position: Y X`. The default is `center center`.

blobject-fit is responsive-capable so long as the visitor's browser supports the particular markup you have chosen. For example:

```

```

It provides fallback support for videos with `object-fit: cover` and `object-fit: contain` as well, though Javascript has to set the width and height explicitly for `cover`.

`object-position` is not yet supported for video elements. They'll draw from `center center`.

Requirements
------------

[](#requirements)

blobject-fit does not require any Javascript frameworks, however browsers must support the following:

- [classList](http://caniuse.com/#feat=classlist) (IE10+)
- [querySelector](http://caniuse.com/#feat=queryselector) + [querySelectorAll](http://caniuse.com/#feat=queryselector) (IE8+)

Images require:

- [background-size](http://caniuse.com/#feat=background-img-opts) (IE9+)

Videos require what they do anyway:

- [video](http://caniuse.com/#feat=video) (IE9+)

Responsive image sources (e.g. `srcset`, ``) require native browser support for the markup you've chosen. Otherwise it will just use the good ol' `src` source.

Non-video `` sources may not size correctly. If you're dealing with a pre-IE9 crowd or have other compatibility concerns, you should implement additional tests when constructing the DOM.

Installation
------------

[](#installation)

### HTML

[](#html)

Download `blobject-fit.min.js`, add it to your project folder, and include it somewhere on the page.

```

```

Or via Composer:

```
composer require "blobfolio/blobject-fit:dev-master"
```

Or via Bower:

```
bower install blobject-fit
```

### CSS

[](#css)

Your existing `object-fit` CSS definitions may not be readable at runtime. Following the convention established by earlier `object-fit` polyfills, blobject-fit requires the inclusion of a clever `font-family` hack in your CSS:

```
/* an example using "cover" */
.my-cover-image {
    object-fit: cover;
    font-family: 'object-fit: cover;';
}

/* an example using "contain" */
.my-contain-image {
    object-fit: contain;
    font-family: 'object-fit: contain;';
}

/* an example with positioning */
.my-cover-image {
    object-fit: cover;
    object-position: bottom left;
    font-family: 'object-fit: cover; object-position: bottom left;';
}
```

### Profit

[](#profit)

That's it!

blobject-fit will automatically detect `object-fit` support when the DOM loads and, if necessary, adjust any fitted images it finds.

License
-------

[](#license)

Copyright © 2018 [Blobfolio, LLC](https://blobfolio.com) <>

This work is free. You can redistribute it and/or modify it under the terms of the Do What The Fuck You Want To Public License, Version 2.

```
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004

Copyright (C) 2004 Sam Hocevar

Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.

DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

0. You just DO WHAT THE FUCK YOU WANT TO.

```

### Donations

[](#donations)

   [![Bitcoin QR](https://camo.githubusercontent.com/02c1aab6dc8b7908cb540a77b3df80ff1781b137aa6e4de8e795aac613ffe124/68747470733a2f2f626c6f62666f6c696f2e636f6d2f77702d636f6e74656e742f7468656d65732f62332f7376672f6274632d6769746875622e737667)](https://camo.githubusercontent.com/02c1aab6dc8b7908cb540a77b3df80ff1781b137aa6e4de8e795aac613ffe124/68747470733a2f2f626c6f62666f6c696f2e636f6d2f77702d636f6e74656e742f7468656d65732f62332f7376672f6274632d6769746875622e737667) If you have found this work useful and would like to contribute financially, Bitcoin tips are always welcome!

**1Af56Nxauv8M1ChyQxtBe1yvdp2jtaB1GF**

###  Health Score

23

—

LowBetter than 26% of packages

Maintenance0

Infrequent updates — may be unmaintained

Popularity7

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity65

Established project with proven stability

 Bus Factor1

Top contributor holds 83.3% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~291 days

Total

3

Last Release

2941d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/403248?v=4)[Josh](/maintainers/joshstoik1)[@joshstoik1](https://github.com/joshstoik1)

---

Top Contributors

[![joshstoik1](https://avatars.githubusercontent.com/u/403248?v=4)](https://github.com/joshstoik1 "joshstoik1 (20 commits)")[![bfred-it](https://avatars.githubusercontent.com/u/53252526?v=4)](https://github.com/bfred-it "bfred-it (4 commits)")

---

Tags

cssfrontendobject-fitobject-positionpolyfill

### Embed Badge

![Health badge](/badges/blobfolio-blobject-fit/health.svg)

```
[![Health](https://phpackages.com/badges/blobfolio-blobject-fit/health.svg)](https://phpackages.com/packages/blobfolio-blobject-fit)
```

###  Alternatives

[fullcalendar/fullcalendar

Full-sized drag & drop event calendar

20.5k374.8k4](/packages/fullcalendar-fullcalendar)[eternicode/bootstrap-datepicker

A datepicker for Bootstrap

12.7k548.1k6](/packages/eternicode-bootstrap-datepicker)[eonasdan/bootstrap-datetimepicker

Date/time picker widget based on twitter bootstrap

7.2k496.2k9](/packages/eonasdan-bootstrap-datetimepicker)[trentrichardson/jquery-timepicker-addon

Adds a timepicker to jQueryUI Datepicker.

2.6k70.5k](/packages/trentrichardson-jquery-timepicker-addon)[jonthornton/jquery-timepicker

A javascript timepicker plugin for jQuery inspired by Google Calendar.

1.9k41.5k1](/packages/jonthornton-jquery-timepicker)[grimmlink/bootstrap-filestyle

jQuery customization of input html file for Bootstrap Twitter http://markusslima.github.io/bootstrap-filestyle/

71410.6k](/packages/grimmlink-bootstrap-filestyle)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)