object-view-box
The object-view-box CSS property crops and zooms to an inset area of an image. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The object-view-box CSS property crops and zooms to an inset area of an image. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
object-view-box Experimental | 104 | 104 | | | 104 | |
none Experimental | 104 | 104 | | | 104 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.thumbnail {
object-view-box: inset(10% 20% 10% 20%);
}
.zoomed {
object-view-box: inset(25% 25% 25% 25%);
}Live demo
Use cases
Use object-view-box
Use object-view-box when the default CSS behavior is not expressive enough for the component or layout you are building.
Handle edge cases
Apply object-view-box to solve a specific styling constraint without introducing broader layout or behavior changes.
Cautions
- Test object-view-box in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Confirm that using object-view-box does not make content harder to perceive, understand, or operate in assistive contexts.
Related links
Powered by web-features