How can I display just a portion of an image in HTML/CSS?

Embracing clip-path

Different clip-path shapes, like ellipses, polygons, and circles, allow for numerous creative ways to display sections of an image. This property supports various shapes, broadening your creative scope:

.circular-clip {
  clip-path: circle(50% at center);
}


Ensure you consider the context of your HTML element. Block-level elements like div or p and inline elements like span might differ in their response to being clipped. Testing your implementation across different browsers guarantees a unified user experience.

A lot in the background: leveraging CSS backgrounds

Another approach involves using the image as a container background. Accomplish this by manipulating the background-size and background-position properties:

.image-section {
  width: 50px;  /* Who needs width? We do! */
  height: 50px; /* And some height for good measure */
  background-image: url('image.jpg'); /* Our star of the show */
  background-repeat: no-repeat; /* Just once is enough */
  background-size: cover; /* Dress to fit */
  background-position: center;  /* Get in frame! */
}


The background-position can even be altered to display different sections of the image, catering to evolving visual requirements in a flash.

SVG: a game-changer for clip-path

Using an SVG reference with the 'url' function in clip-path allows for custom shapes. Define the clipping path in SVG and refer to it in your CSS:

<svg width="0" height="0">
  <defs>
    <clipPath id="svgClip">
      <!-- Your playground: design the clipping path -->
      <circle cx="50" cy="50" r="50" />
    </clipPath>
  </defs>
</svg>

<div style="clip-path: url(#svgClip);">
  <img src="image.jpg">
</div>


Both local and external SVG sources are supported. As such, the clip-path property is not a one-trick pony. It offers a broad range of possibilities, enabling you to achieve complex, visually arresting designs.

Survival of the cross-browser-fittest

Always remember to test solutions across browsers and devices to ensure user consistency and leave no scope for user frustrations. With tools like Can I Use, you can stay ahead of browser compatibility issues.

clip-path versus positioning

When using clip-path, always keep the shape and position of your clipping path relevant to the image in sight. The position: absolute; method works well with overflow hidden for simple, fast implementation, but stands no chance against the versatility offered by clip-path.

Ensure to have a good grasp of document flow and how clip-path with position: relative; behaves within flex or grid layouts.

The clip CSS attribute, although useful, has been deprecated, making clip-path the go-to choice for modern, dynamic, and responsible responsive development.