Sunday, May 29, 2022
HomeProgrammingFirst Look At The CSS object-view-box Property | CSS-Tips

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


Ahmad Shadeed — doing what he at all times does so nicely — supplies an early have a look at the object-view-box property, one thing he describes as a local technique to crop a picture within the browser with CSS.

The use case? Properly, Ahmad wastes no time exhibiting use the property to perform what used to require both (1) a wrapping factor with hidden overflow round a picture that’s sized and positioned inside that factor or (2) the background-image route.

However with object-view-box we will basically draw the picture boundaries as we will with an SVG’s viewbox. So, take a plain ol’ <img> and name on object-view-box to trim the perimeters utilizing an inset perform. I’ll merely drop Ahmad’s pen in right here:

Solely supported in Chrome Canary for now, I’m afraid. However it’s (at present) deliberate to launch in Chrome 104. Elsewhere:


Direct Hyperlink →

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments