blobject-fit

A lightweight, dependency-free object-fit polyfill.

Table of Contents

1. Features
2. Requirements
3. Installation
4. License

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:

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="Image" />
<!--
IE 11 will always use small.jpg, while Edge 14 will choose between small.jpg,
medium.jpg, and large.jpg depending on the screen size.
-->

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

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

• classList (IE10+)
• querySelector + querySelectorAll (IE8+)

Images require:

• background-size (IE9+)

Videos require what they do anyway:

• video (IE9+)

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

Non-video <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

HTML

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

<script src="/path/to/blobject-fit.min.js"></script>

Or via Composer:

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

Or via Bower:

bower install blobject-fit

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

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

Copyright © 2018 Blobfolio, LLC <hello@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 <sam@hocevar.net>

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

If you have found this work useful and would like to contribute financially, Bitcoin tips are always welcome! 1Af56Nxauv8M1ChyQxtBe1yvdp2jtaB1GF