object-view-box | CSS CSS Properties

Allows you to specify a 'view box' for an image or video, similar to how viewBox works in SVG. This essentially lets you crop or zoom into a specific part of a replaced element using CSS.

Quick example

.zoomed-image {
  /* Crops the image to a specific rectangle area */
  object-view-box: inset(10% 20% 30% 40%);
}

Quick facts

Initial value

none

Inherited

Applies to

replaced elements

Animation type

asIfPossibleOtherwiseDiscrete

Values

none

object-view-box Browser Support

Limited availability 79% global usage

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Not ready for production without a fallback.

View on caniuse.com → View on MDN → View on webstatus.dev → Learn more about Baseline →

104+