object-fit-images

WebJar for object-fit-images

License	MIT
Categories	Github Development Tools Version Controls
GroupId	org.webjars.npm
ArtifactId	github-com-bfred-it-object-fit-images
Last Version	2.5.6
Release Date	Oct 11, 2016
Type	jar
Description	object-fit-images WebJar for object-fit-images
Project URL	http://webjars.org
Source Code Management	https://github.com/bfred-it/object-fit-images

Download github-com-bfred-it-object-fit-images

Filename	Size
github-com-bfred-it-object-fit-images-2.5.6.pom
github-com-bfred-it-object-fit-images-2.5.6.jar	18 KB
github-com-bfred-it-object-fit-images-2.5.6-sources.jar	22 bytes
github-com-bfred-it-object-fit-images-2.5.6-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/github-com-bfred-it-object-fit-images/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>github-com-bfred-it-object-fit-images</artifactId>
    <version>2.5.6</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/github-com-bfred-it-object-fit-images/
implementation 'org.webjars.npm:github-com-bfred-it-object-fit-images:2.5.6'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/github-com-bfred-it-object-fit-images/
implementation ("org.webjars.npm:github-com-bfred-it-object-fit-images:2.5.6")

Apache Buildr

'org.webjars.npm:github-com-bfred-it-object-fit-images:jar:2.5.6'

Apache Ivy

<dependency org="org.webjars.npm" name="github-com-bfred-it-object-fit-images" rev="2.5.6">
  <artifact name="github-com-bfred-it-object-fit-images" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='github-com-bfred-it-object-fit-images', version='2.5.6')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "github-com-bfred-it-object-fit-images" % "2.5.6"

Leiningen

[org.webjars.npm/github-com-bfred-it-object-fit-images "2.5.6"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

object-fit-images

🗻 Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari, ...

• Fast and lightweight (demo)
• No additional elements are created
• Setup is done via CSS
• Scaling is taken care by the browser (it uses background-size)
• srcset support
• src and srcset properties and attributes keep working: img.src = 'other-image.jpg'

Alternative solutions

Comparison	fregante /object-fit-images 🌟	constancecchen /object-fit-polyfill	tonipinel /object-fit-polyfill
Browsers	IEdge 9-14, Android<5, Safari<10	<- Same	"All browsers"
Tags	img	image video picture	img
cover/contain	💚	💚	💚
fill	💚	💚	💚
none	💚	💚	💚
scale-down	💚 using {watchMQ:true}	💚	💔
object-position	💚	💚	💔
srcset support	💚 Native or picturefill notes	💚	💔
Extra elements	💚 No	💔 Yes	💔 Yes
Settings	💚 via CSS	💔 via HTML	💔 via HTML

Usage

You will need 3 things

1. one or more <img> elements with src or srcset

   <img class='your-favorite-image' src='image.jpg'>

2. CSS defining object-fit and a special font-family property to allow IE to read the correct value

   .your-favorite-image {
   	object-fit: contain;
   	font-family: 'object-fit: contain;';
   }

   or, if you also need object-position

   .your-favorite-image {
   	object-fit: cover;
   	object-position: bottom;
   	font-family: 'object-fit: cover; object-position: bottom;';
   }

   To generate the font-family automatically, you can use the PostCSS plugin or the SCSS/SASS/Less mixins.

   If you set the font-family via JavaScript (which must be followed by calling objectFitImages()), make sure to include the quotes in the property.

3. the activation call before </body>, or on DOM ready

   objectFitImages();
   // if you use jQuery, the code is: $(function () { objectFitImages() });

   This will fix all the images on the page and also all the images added later (auto mode).

   Alternatively, only fix the images you want, once:

   // pass a selector
   objectFitImages('img.some-image');

   // an array/NodeList
   var someImages = document.querySelectorAll('img.some-image');
   objectFitImages(someImages);

   // a single element
   var oneImage = document.querySelector('img.some-image');
   objectFitImages(oneImage);

   // or with jQuery
   var $someImages = $('img.some-image');
   objectFitImages($someImages);

   You can call objectFitImages() on the same elements more than once without issues, for example to manually request an update of the object-fit value.

Apply on resize

You don't need to re-apply it on resize, unless:

• You're using scale-down, or

• your media queries change the value of object-fit, like this

                               img { object-fit: cover; }
   @media (max-width: 500px) { img { object-fit: contain; } }

In one of those cases, use the watchMQ option:

objectFitImages('img.some-image', {watchMQ: true});
// or objectFitImages(null, {watchMQ: true}); // for the auto mode

Install

Pick your favorite:

<script src="dist/ofi.min.js"></script>
<!-- CDN is also available, but I suggest you concatenate JS files instead -->
<!-- Visit https://cdnjs.com/libraries/object-fit-images -->

npm install --save object-fit-images

var objectFitImages = require('object-fit-images');

import objectFitImages from 'object-fit-images';

API

objectFitImages(images, options)

Both parameters are optional.

parameter	description
images	Type: string, element, array, NodeList, null Default: null The images to fix. More info in the Usage section
options	Type: object Default: {} Example: {watchMQ:true} watchMQ Type: boolean Default: false This enables the automatic re-fix of the selected images when the window resizes. You only need it in some cases

License

MIT © Federico Brigante

Versions

Version
2.5.6 Oct 11, 2016