fabricjs-object-fit

Appearance

fabricjs-object-fitCSS object-fit and object-position for Fabric.js v7+.

Control how images and objects fill their containers on the Fabric.js canvas, just like CSS object-fit.

Get Started
View Examples

No Extra Dependencies

Zero runtime dependencies beyond Fabric.js itself. Lightweight and tree-shakeable.

Five Fit Modes

Supports cover, contain, fill, scale-down, and none. The same modes you know from CSS object-fit, applied to any FabricObject.

Precise Positioning

Position content inside the container using pixels, percentages, or named anchors (left, center, right, top, bottom), just like CSS object-position.

Why fabricjs-object-fit? ​

Fabric.js has no built-in way to say "fit this image inside a 400×400 box without distortion." In the browser, CSS object-fit solves this in one line. This library brings that same mental model to Fabric.js:

  • cover fills the container completely, cropping if needed (think hero banners, profile pictures)
  • contain fits the entire image inside the container, letterboxing if needed (think product thumbnails)
  • fill stretches to match the container exactly (the Fabric.js default behavior)
  • none displays at the image's original size, clipping anything outside the container
  • scale-down like contain, but never scales up, only down

The library also handles serialization (toJSON / loadFromJSON), so your object-fit containers round-trip through Fabric.js save/load without extra work.