object‑view‑box Demo - Online Zoom Into Image

object-view-box is a CSS property that lets you crop and zoom into the content of replaced elements like <img> and <video>. Think of it as SVG's viewBox attribute but for HTML images. You define a rectangular region using xywh(x y width height) or inset(), and the browser scales that region to fill the entire element box. It's like having a magnifying glass that you can precisely position.

object-fit controls how the entire image fits within its container (cover, contain, fill, etc.). object-view-box goes further — it lets you select a sub-region of the image to display, effectively cropping + zooming in one declaration. You can combine both: use object-fit: contain for the base layout, then object-view-box to zoom into a specific area.

As of 2024, object-view-box is supported in Chromium-based browsers (Chrome 104+, Edge 104+) but may require enabling the "Experimental Web Platform Features" flag. Firefox and Safari have not yet implemented it. For production, use the transform + overflow:hidden fallback (shown in this tool) which works universally across all browsers.

The most reliable cross-browser method is wrapping the <img> in a container with overflow: hidden and applying transform: translate(x, y) scale(s) to the image. This tool generates both the transform-based CSS and the equivalent object-view-box syntax, so you can use progressive enhancement: serve the transform version to all browsers and add object-view-box as an enhancement for supported ones.

SVG viewBox defines the coordinate system and visible area of an SVG canvas. object-view-box was directly inspired by it — the CSS Working Group wanted to bring the same powerful cropping/zooming capability to regular HTML images and videos. The syntax xywh() mirrors how you'd define a viewBox in SVG: x, y, width, height of the visible region within the content's intrinsic coordinate space.

No — transform is a post-layout operation. The container retains its original size in the document flow; zooming happens purely visually on the GPU-composited layer. This makes it highly performant (60fps smooth) and layout-safe. However, very large scale values (5×+) combined with enormous source images may increase GPU memory usage. Always serve appropriately sized images for production.

• E-commerce product images — hover to zoom into fabric textures, jewelry details, or labels.
• Maps & floor plans — pan and zoom to explore large diagrams.
• Art portfolios — let viewers examine brush strokes up close.
• Medical or scientific imagery — focus on specific regions of interest.
• Responsive hero images — art-direct which part of the image is visible at different breakpoints.

Yes! object-view-box works on any replaced element, including <video> and <canvas>. This opens up interesting possibilities like cropping a video feed dynamically or zooming into a canvas rendering — all with pure CSS, no JavaScript manipulation of the source needed.