# Crop and Zoom Images with CSS object-view-box

URL: https://theosoti.com/short/shape-outside-image/
Published: 2025-07-16
Author: Theo Soti

> Use object-view-box in CSS to crop and zoom images precisely—no image editing, just clean, flexible layout control.

## 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`.

```css
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!