The object-view-box
CSS property allows developers to define a view box over an element,
effectively making it possible to pan/crop/zoom over an element's content.
This is very useful to display certain parts of images for example. While developers can employ workarounds such as
using a
<div>
, displaying the image by using the background-image
CSS property, and then
positioning and cropping the image with the background-position
and background-size
CSS
properties, the code is more complicated, and it makes the image purely decorative and inaccessible.
The example below displays an image with an inset view box that's used to only show a portion of the image: