object-view-box
The object-view-box CSS property crops and zooms to an inset area of an image.
Status
Limited availability
MDN documentation
Specifications
Browser support
- Chrome 104 Released on 2022-08-02
- Chrome Android 104 Released on 2022-08-02
- Edge 104 Released on 2022-08-05
- Firefox ❌ See bugzil.la/1773791
- Firefox for Android ❌
- Safari ❌
- Safari on iOS ❌
Usage (according to Chrome Platform Status)
~0.078% of page loads. More data at chromestatus.com.Web Platform Tests (WPT)
View the latest WPT test results for this featureDeveloper votes
Do you need this feature?
Let us know by leaving a 👍 reaction on the feedback issue. Don't forget to also leave a comment explaining your specific use case.
Developer use cases
-
The most immediate opportunity I can see would be an "image zoom" feature. Initially, being able to hover over an image and have that image zoom in, could be cool! Another option would be offering multiple predetermined "zoom zones", where clicking an option would zoom the image to that zone. Both examples above demonstrated here: https://codepen.io/aarontgrogg/pen/XJdqwBB The *ideal* would be if it could zoom in to the portion of the pic you are hovering over, but that would require at least *some* JS, to track and pass the current x/y to the CSS custom properties... Yes, *some* JS, but certainly less than we use now for the same feature!
The most immediate opportunity I can see would be an "image zoom" feature. Initially, being able to hover over an image and have that image zoom in, could be cool! Another option would be offering multiple predetermined "zoom zones", where clicking an option would zoom the image to that zone. Both examples above demonstrated here: https://codepen.io/aarontgrogg/pen/XJdqwBB The *ideal* would be if it could zoom in to the portion of the pic you are hovering over, but that would require at least *some* JS, to track and pass the current x/y to the CSS custom properties... Yes, *some* JS, but certainly less than we use now for the same feature! [see original comment]
View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist