First Look At The CSS object-view-box Property | CSS-Tricks

Date:


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:



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Share post:

Subscribe

spot_imgspot_img

Popular

More like this
Related

How to Manage Your Web Design Business with Squarespace

If you’re looking for a way to streamline...

Rated People Proves ROI Faster With ClarityAutomate

SEO Testing Enables...

Best APIs for Developers – SitePoint

APIs are everywhere on the Internet, and knowing...

What is a bounce rate and why does it matter

Bounce rate is one of the most critical...