First Look At The CSS object-view-box Property

CSS Gets a Native Way to Crop Images With object-view-box

Frontend developers have long needed workarounds to crop an image in the browser: either wrapping the image in a container with hidden overflow while sizing and positioning the image inside, or resorting to the background-image property. Ahmad Shadeed offers an early look at the new object-view-box property, which he describes as a native CSS solution for this task.

With object-view-box, developers can define the visible boundaries of an image much like an SVG’s viewbox attribute. Applied directly to a plain <img> element, the property uses the inset function to trim away unwanted edges—no extra markup or background hacks required.

Support is currently limited to Chrome Canary, but the feature is slated to ship in Chrome 104. Beyond that, the property is included in the Editor’s Draft of the CSS Images Level 4 specification. Firefox has marked it as worth prototyping, while Safari has yet to signal any intent to implement it.