Ahmad Shadeed — doing what he always does so well — provides an early look at the object-view-box property, something he describes as a native way to crop an image in the browser with CSS.
The use case? Well, Ahmad wastes no time showing how to use the property to accomplish what used to require either (1) a wrapping element with hidden overflow around an image that’s sized and positioned inside that element or (2) the background-image route.
But with object-view-box we can essentially draw the image boundaries as we can with an SVG’s viewbox. So, take a plain ol’ <img> and call on object-view-box to trim the edges using an inset function. I’ll simply drop Ahmad’s pen in here:
Only supported in Chrome Canary for now, I’m afraid. But it’s (currently) planned to release in Chrome 104. Elsewhere:
- It’s in the CSS Images Level 4 specification (Editor’s Draft).
- Firefox says the property is worth prototyping.
- No signal yet from Safari.
To Shared Link — Permalink on CSS-Tricks
First Look At The CSS object-view-box Property originally published on CSS-Tricks. You should get the newsletter.