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:
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.
This is the 3rd post in a small series we are doing on form accessibility.…
This is going to be the 2nd post in a small series we are doing…
Hey all you wonderful developers out there! In this post we are going to explore…
Hey all you wonderful developers out there! In this post, I am going to take…
These things called passkeys sure are making the rounds these days. They were a main attraction at W3C…
I spend a lot of time in DevTools, and I’m sure you do too. Sometimes…