Crop images with precision, directly in CSS.
Forget clip-path and forget editing assets.
With object-view-box, you can zoom and crop right from your stylesheet.
It’s like viewBox in SVG, but for any element using object-fit.
img {
object-fit: cover;
object-view-box: inset(20% 0 0 0);
}The syntax is familiar: use inset() or even rect() to define your cropping zone.
This works alongside object-fit to give you complete control over what portion of the image is displayed.
Need to zoom on a specific part of an image? Want to highlight just a region inside a video or iframe?
No JavaScript. No image editing. No container tricks. Just pure CSS.
Browser support is still experimental (~76%), so don’t use it in production yet. But it’s available behind flags or in dev builds for testing.
This property is the kind of thing you’ll soon wonder how you ever built layouts without.
Checkout the codepen: https://codepen.io/theosoti/pen/yyYeENV
Using object-view-box for focal cropping is useful when assets need consistent framing across different cards. Define focal rules early so important subject areas stay visible at every breakpoint.
Focal cropping with object-view-box helps keep important image regions visible across reusable card formats. Set focal rules once, then verify results at multiple aspect ratios.
Prefer subtle enhancement over heavy treatment. The visual should support hierarchy, not compete with content.
To roll this out safely, start by applying clip-path in a single UI surface where the benefit is obvious. After validation, expand gradually to matching components and avoid ad-hoc one-off overrides.
If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.
Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!