npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@polyfiller/object-fit

v0.0.39

Published

A robust polyfill for the 'object-fit' and 'object-position' CSS-properties

Downloads

3

Readme

A robust polyfill for the 'object-fit' and 'object-position' CSS-properties

Description

This is a robust, feature complete polyfill for the object-fit and object-position CSS properties. It differs from other similar solutions primarily in three areas: feature completeness, modern API support, and the ability to react to changes.

Demo

To check out the polyfill in action, A demo can be found here.

Features

  • Supports not only images, but also videos, the picture element, as well as the srcset attribute.
  • Supports Shadow DOM.
  • Reacts to changes, and updates calculated positions automatically.
  • Leverages the browser's own scaling algorithms where possible.
  • Works seamlessly and automatically.
  • Works with the postcss-object-fit-images plugin.

Table of Contents

Install

npm

$ npm install @polyfiller/object-fit

Yarn

$ yarn add @polyfiller/object-fit

pnpm

$ pnpm add @polyfiller/object-fit

Applying the polyfill

The polyfill will check if the browser already supports object-fit and object-position and will only be applied if the runtime doesn't already support it.

To include it, add this somewhere:

import "@polyfiller/object-fit/polyfill";

However, it is generally a good idea that you only include the polyfill for runtimes that don't already support object-fit and object-position. One way to do so is with an async import:

if (!("objectFit" in document.documentElement.style)) {
	await import("@polyfiller/object-fit/polyfill");
}

Alternatively, you can use Polyfill.app which uses this polyfill and takes care of only loading the polyfill if needed as well as adding the language features that the polyfill depends on (See dependencies).

Usage

You can provide object-fit and/or object-position values in one of more ways:

  1. As part of the style attribute for an image:
<img src="..." style="object-fit: contain" />
  1. As part of a special object-fit, object-position, data-object-fit, or data-object-position attribute:
<img src="..." object-fit="contain" />
<!-- or -->
<img src="..." data-object-fit="contain" />

<img src="..." object-position="50% 50%" />
<!-- or -->
<img src="..." data-object-position="50% 50%" />
  1. Directly from CSS, using the object-fit and/or object-position properties, and a special font-family property that is used by browsers that doesn't natively support these features:
img,
video {
	object-fit: cover;
	object-position: bottom;
	font-family: "object-fit: cover; object-position: bottom";
}

To generate the font-family automatically based on your CSS, you can use this PostCSS plugin.

Dependencies & Browser support

This polyfill is distributed in ES5-compatible syntax, but is using some additional APIs and language features beyond ES5 which must be available in the runtime:

  • MutationObserver
  • requestAnimationFrame
  • Set
  • WeakMap
  • Symbol.iterator
  • Symbol.toStringTag

Generally, I would highly recommend using something like Polyfill.app which takes care of this stuff automatically.

Maintainers

| | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Frederik WessbergTwitter: @FredWessbergGithub: @wessbergLead Developer |

Backers

| | | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | BubblesTwitter: @use_bubbles | Christopher Blanchard |

Patreon

FAQ

What is the performance and reaction times of this polyfill?

This polyfill observes various attributes on <img> and <video> elements such as src, srcset, style, and class, as well as the special object-fit, data-object-fit, object-position, and data-object-position attributes by leveraging MutationObserver. As such, this is quite performant. Changing any of these attributes will immediately trigger repositioning of the fitted element(s). However, this polyfill also lazily recalculates the computed styles for fitted elements to see if their styles changed through cascaded styles. Getting the computed styles for an element is somewhat expensive, and so this is done once every two seconds per fitted element. This means that an image/video may take up to two seconds to react to changes to styling. If you want it to react immediately, one way to force immediate repositioning is to provide a new value to the style attribute.

License

MIT © Frederik Wessberg (@FredWessberg) (Website)