How can CSS cropping techniques isolate or hide portions of an image?

Front-end developers frequently ask how to show only a portion of an image without opening a graphics editor. In community threads, you will see variations of the same need: create square avatars, focus on a subject in a banner, mask a shape, or crop an image responsively. 

How can CSS cropping techniques isolate or hide portions of an image? I want to show only part of an image in different layouts, such as square thumbnails, circle avatars, hero banners with a focal point, and masked shapes. I would like examples using CSS for images and backgrounds, and any notes on performance or accessibility. Bonus if there is a way to offload actual cropping server side for better performance.

CSS can visually crop by confining, positioning, or masking an image within a frame. Keep in mind this does not reduce bytes downloaded. The browser still fetches the entire file, then hides parts of it. If bandwidth matters, consider a server-side crop as a complement to CSS.

Simple, widely supported, great for thumbnails.

<div class="frame">
  <img src="photo.jpg" alt="Example">
</div>

.frame {
  width: 200px;
  height: 200px;
  overflow: hidden;
  position: relative;
}
.frame img {
  position: absolute;
  top: -20px;   /* adjust focal point */
  left: -50px;
  height: 240px; /* optional scale to fill */
}Code language: JavaScript (javascript)

Use object-fit: cover to fill a fixed box while preserving aspect ratio. Adjust the focal point with object-position.

<img class="thumb" src="photo.jpg" alt="Landscape">

.thumb {
  width: 240px;
  height: 160px;
  object-fit: cover;        /* similar to background-size: cover */
  object-position: 30% 40%; /* nudge the crop window */
  border-radius: 12px;      /* optional rounded corners */
}Code language: JavaScript (javascript)

For layout alignment details, see this guide on centering images with HTML and CSS.

Great for decorative images or when you need to overlay content. The element acts as the crop window. Explore techniques in 6 ways to stretch a background image with CSS.

<div class="hero"></div>

.hero {
  width: 100%;
  height: 300px;
  background-image: url('banner.jpg');
  background-size: cover;        /* cover crops to fill */
  background-position: 60% 40%;  /* control focal area */
  background-repeat: no-repeat;
}Code language: HTML, XML (xml)

Use the clip-path property to reveal only the desired region. Works on any element.

<img class="clip" src="photo.jpg" alt="Subject">

.clip {
  width: 300px;
  height: 300px;
  object-fit: cover;
  clip-path: circle(45% at 50% 50%); /* circle avatar */
}

/* Custom polygon */
.custom-clip {
  clip-path: polygon(10% 10%, 90% 10%, 80% 90%, 20% 90%);
}Code language: JavaScript (javascript)

Masks use an image or gradient to control transparency. Requires -webkit- prefix for Safari.

<img class="fade-edge" src="photo.jpg" alt="Scenery">

.fade-edge {
  width: 400px;
  height: 250px;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(black 70%, transparent 100%);
  mask-image: linear-gradient(black 70%, transparent 100%);
}Code language: JavaScript (javascript)

You can also layer or overlay elements while keeping control of the visible region. See ideas in how to overlay a picture on a picture.

Show a subsection of a larger image sprite by offsetting the background.

.icon {
  width: 32px;
  height: 32px;
  background-image: url('icons-sprite.png');
  background-repeat: no-repeat;
  background-position: -96px -64px; /* x y offsets */
}Code language: CSS (css)

• CSS cropping hides pixels but does not save network bytes.
• Use object-fit or background-size to handle different aspect ratios.
• Combine CSS with responsive images (srcset or sizes) or transform the asset server side for best performance. For scaling guidance, see using CSS to scale page elements.

If you want to reduce bytes and deliver exactly what you show, process the crop on delivery. For example, this URL returns a 320×180 crop centered on the most interesting region:

https://res.cloudinary.com/demo/image/upload/c_fill,w_320,h_180,g_auto,f_auto/sample.jpg

Circle avatar focused on a face:

https://res.cloudinary.com/demo/image/upload/c_thumb,w_200,h_200,g_face,r_max,f_auto/sample.jpg

You can then layer your CSS on top for fine positioning. For background techniques and layout tips, this practical read on background images in CSS pairs well with server-side cropping.

• Using background images for content that needs alt text and SEO. Use <img> tags with alt text.
• Forgetting that clip-path affects hit testing. Only the visible region is clickable.
• Masks can be GPU intensive on low-end devices. Test on target hardware.

• Use overflow hidden, object-fit, or background-position to crop visually.
• Use clip-path for shapes and masks for fades.
• CSS cropping does not save bandwidth. For performance, crop on the server and deliver only what you need.
• Combine responsive images with smart server-side crops, then refine with CSS for layout polish.

• PNG to WebP Converter
• Image Upscaling and Quality Enhancement
• Compress PNG
• Background Remover

Ready to optimize how you crop and deliver images at scale? Create your free Cloudinary account and start transforming, optimizing, and delivering media with minimal code.