How to Crop Images in CSS: `object-fit`, `clip-path`, Masks, and Modern Media Cropping

Almost every modern UI ends up cropping images somewhere.

Avatars need to become circles. Card thumbnails need to fit fixed slots. Hero media needs to emphasize the subject instead of the whole photo. Decorative images sometimes need shaped cutouts rather than plain rectangles.

The tricky part is that "cropping" means different things depending on where it happens.

A server can generate a smaller file that contains only the portion you need. CSS cannot do that.

CSS can only control what portion of the already-loaded image is visible in the browser.

That distinction matters because it changes both the performance story and the technique you should choose.

This guide focuses on the practical cropping choices that matter in real front-end work:

• when CSS cropping is enough
• when you still need server-side image processing
• why object-fit is the default answer for many media slots
• when clip-path or mask-image is the better tool
• why the old clip property is legacy-only now
• where the experimental object-view-box fits today

If you want the responsive-image baseline first, start with Responsive Images in CSS: aspect-ratio, object-fit, and image-rendering. If your crop also needs careful overlay treatment, How to Make Text Over Images Readable in CSS is the best companion page.

1. CSS cropping is visual cropping, not file cropping

This is the first rule to keep in mind.

When you crop an image with CSS, you are not changing the source file. You are only changing what portion of that file is visible.

That means CSS cropping is good for:

• presentation
• layout consistency
• focal-point emphasis
• decorative shaping
• interaction and animation effects

It is not a replacement for real image processing when you need:

• smaller downloaded files
• responsive art direction from the server
• different compression choices
• lower transfer cost for mobile users

So the practical rule is:

CSS can crop what the user sees. It cannot reduce the bytes you already sent.

If the source image is huge and the component only ever shows a small portion, the best solution is often still a better source image from the server.

2. Choose the technique by the shape of the crop

Most CSS image-cropping problems fall into one of these buckets:

Rectangular slot crop

You have a fixed box and want the image to fill it.

Best default: object-fit plus object-position

Rectangular viewport over a larger image

You want to move a large image inside a fixed frame.

Best default: wrapper plus overflow: hidden, often with positioning or transforms

Shaped crop

You want a circle, polygon, inset crop, or decorative reveal.

Best default: clip-path

Soft or alpha-based crop

You want feathered edges, transparency-based reveal, or a more mask-like effect.

Best default: mask-image

Experimental zoomed view into replaced content

You want an SVG-like view box over an <img> or <video>.

Modern but experimental option: object-view-box

Once you classify the crop correctly, the choice gets much easier.

3. For most image slots, object-fit is the right answer

If the image is an actual replaced element such as <img> or <video>, object-fit is usually the cleanest way to crop it into a consistent box.

<img class="card-media" src="./photo.jpg" alt="Product photo" />

.card-media {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

This works so well because:

• the slot shape is defined by aspect-ratio
• the media fills the slot with object-fit: cover
• the crop focus can be moved with object-position

That makes it ideal for:

• card thumbnails
• avatars
• gallery tiles
• editorial image slots
• fixed-ratio media blocks

If you only need a rectangular crop and the source is an <img>, this should be your first option, not your last.

4. object-position is how you crop with intention

object-fit: cover solves the mechanical part of cropping. object-position solves the editorial part.

.avatar {
  inline-size: 8rem;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

That becomes important whenever:

• the subject is not centered
• faces sit too low or too high in the frame
• product photography has a meaningful focal area

Without object-position, the crop may be technically correct and still visually wrong.

This is the same broader principle we use elsewhere in CSS:

first define the slot, then decide how the content should sit inside it.

5. Wrapper plus overflow: hidden is still a useful baseline crop

Before modern media-fitting tools, a common crop pattern was:

• fixed-size wrapper
• hidden overflow
• move the image inside

That pattern is still useful today when you want a movable viewport over an image.

<figure class="crop-frame">
  <img src="./landscape.jpg" alt="Forest path" />
</figure>

.crop-frame {
  inline-size: 20rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 1rem;
}

.crop-frame img {
  display: block;
  inline-size: 28rem;
  max-inline-size: none;
  transform: translate(-2rem, -1rem);
}

This is not as elegant as object-fit for normal image slots, but it is still useful when:

• you need explicit manual panning
• you are working with unusual compositions
• you are animating the visible region by moving the content

The main limitation is that it is more manual. You are managing both the viewport and the moved image yourself.

6. clip-path is the best standard way to crop into shapes

When the crop is not just a rectangle, clip-path is usually the first serious answer.

It supports shapes such as:

• inset()
• circle()
• ellipse()
• polygon()
• path() in supporting contexts

For example:

.hex {
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

Or an inset crop with rounded corners:

.card {
  clip-path: inset(0 round 1rem);
}

clip-path is strong because it gives you:

• shaped crops
• designer-like geometric control
• animation-friendly cropping for many effects

It is especially good for:

• hover reveals
• directional wipe effects
• shaped thumbnails
• decorative cutouts that still need crisp edges

If your crop is meant to be a visible geometric statement, clip-path is often the right tool.

7. clip-path is also much better for motion than legacy clip

The old clip property still exists, but MDN marks it as deprecated and explicitly advises authors to use clip-path instead.

clip also applies only to absolutely positioned elements.

That makes it a poor default for modern work.

You may still see legacy code like this:

img {
  position: absolute;
  clip: rect(40px, 240px, 200px, 60px);
}

The problem is not only that clip is old. It is also limited:

• rectangle only
• absolute or fixed positioning only
• not the direction modern CSS has moved

So the practical rule is simple:

• understand clip when reading older code
• do not choose it for new production work unless you are preserving legacy behavior on purpose

Source: MDN clip, which labels the property deprecated and recommends clip-path instead.

8. mask-image is the closest CSS equivalent to design-tool masking

If you come from tools like Figma, mask-image will feel closer to a real masking workflow than clip-path.

That is because masking is not only about hard geometry. It can also express soft transparency and alpha-based visibility.

.masked-photo {
  mask-image: url("./mask-shape.png");
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
}

MDN's masking guide explains the core difference:

• clipping shows or hides based on whether pixels fall inside a path
• masking uses image transparency or luminance to determine visibility

That makes masking better for:

• feathered edges
• alpha-based reveals
• soft cutouts
• decorative transparency effects
• animated stencil-like UI

It is often the better choice when clip-path feels too sharp or too geometric.

One important production detail from MDN:

only image sources served over HTTP and HTTPS are accepted as mask images because of CORS rules

So if a remote mask suddenly fails and the result is fully hidden, check source delivery and CORS before blaming your CSS.

Sources:

• MDN mask-image
• MDN Introduction to CSS masking

9. For background images, cropping is really sizing plus positioning

When the image is a CSS background rather than an <img>, the crop story changes.

You usually are not clipping the background directly. You are controlling how it fills the background painting area.

That means your baseline crop tools become:

• background-size
• background-position
• background-repeat

.hero {
  background-image: url("./hero.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

This gives you the same practical rectangular crop behavior as object-fit: cover on replaced elements, but for background images.

If you want a deeper guide to the background-side details, including repeat defaults and advanced positioning syntax, Overlooked CSS Image Techniques for Real UI: Background Repeat, Positioning, Dark Mode, and Masks covers that side of the problem.

10. object-view-box is promising, but still experimental

object-view-box is one of the most interesting newer cropping features because it brings an SVG-like viewbox idea to replaced elements.

MDN describes it as defining a rectangle as a viewable area within a replaced element, allowing the content to be zoomed or panned.

For example:

img {
  width: 300px;
  aspect-ratio: 1;
  object-view-box: inset(20% 10% 20% 0);
  object-fit: cover;
}

That can feel like a more direct cropping model than wrapper hacks or manual transforms.

Two important updates matter here:

1. This property is currently marked by MDN as Limited availability and Experimental.
2. MDN now includes examples that animate object-view-box, so older advice that it categorically cannot animate is out of date.

In other words, object-view-box is real and interesting, but not yet a safe baseline feature for broad production use.

That means the practical rule is:

• learn it
• experiment with it
• guard it with fallback thinking
• do not make it your only crop strategy on a critical UI path

Source: MDN object-view-box.

11. image() fragments are interesting, but not a production cropping baseline

Some older sprite-like cropping workflows can conceptually map to CSS image fragments via image() and media fragments such as #xywh=....

The idea is elegant:

.icon {
  background-image: image("sprites.png#xywh=40,0,20,20");
}

But MDN currently states that no browsers support image().

So while it is worth knowing as part of the modern <image> model, it is not a good baseline answer for real shipping code today.

If you are cropping a background image in production, use:

• background-size
• background-position
• background-repeat

not image() fragments.

Source: MDN image().

12. A practical choice guide

If you only want one quick selection guide, use this:

Use object-fit when:

• the source is <img> or <video>
• the crop is rectangular
• the slot shape is fixed
• you want the most production-ready answer

Use a wrapper with overflow: hidden when:

• you want a manual viewport over larger content
• you need explicit movement or transform-based panning
• object-fit is too constrained for the effect

Use clip-path when:

• the crop shape is geometric
• the crop should be part of the visual design
• the effect may animate

Use mask-image when:

• the crop depends on alpha or luminance
• the edges should be soft or semi-transparent
• the effect feels more like a stencil than a hard clip

Use object-view-box when:

• you are experimenting with modern replaced-element cropping
• limited browser support is acceptable
• you are willing to keep a safer fallback

13. A cropping checklist before you ship

Before publishing an image crop to production, check:

1. Is CSS cropping enough, or do you actually need a smaller server-generated asset?
2. Is the crop rectangular, geometric, or alpha-based?
3. If the image is an <img>, did you start with object-fit before reaching for more complex tools?
4. If you used clip-path, is the shape intentional or just decorative noise?
5. If you used mask-image, did you verify the source delivery and CORS behavior?
6. If you used object-view-box, do you have a fallback for unsupported browsers?
7. Is the crop emphasizing the subject, or just hiding layout problems?

That last question matters more than it sounds. Good cropping should make the image clearer, not just make the component easier to force into shape.

14. The takeaway

CSS gives you several ways to crop images, but they are not interchangeable.

They solve different problems:

• object-fit solves fixed media slots
• wrappers plus overflow: hidden solve manual viewport crops
• clip-path solves shaped geometric crops
• mask-image solves alpha-based and softer crops
• object-view-box points toward a promising future, but it is not yet baseline

If you keep one rule from this page, make it this one:

the best CSS cropping technique depends more on the shape and purpose of the crop than on the image itself.

Choose the tool by the crop you actually need, and the result will usually get simpler instead of more clever.