How Can I Display a Specific Portion of an Image Using HTML and CSS?

Displaying a Portion of an Image in HTML/CSS

The ability to display a specific portion of an image is a common requirement in web development. Whether it's for creating a thumbnail or highlighting a particular section, there are several techniques available:

HTML Solution

The element offers a powerful solution for displaying different image portions based on specific criteria. By nesting multiple elements within a container, you can specify different image URLs or styles for different viewport sizes, device pixel ratios, or other conditions. This approach provides greater flexibility for controlling the displayed image portion:

<picture>
  <source media="(min-width: 1000px)" srcset="image-full.jpg">
  <source media="(min-width: 500px)" srcset="image-medium.jpg 50w, image-full.jpg 100w">
  <img src="image-small.jpg" alt="default image">
</picture>

CSS Solution Using clip()

The clip() property, as mentioned in the question, allows you to define a rectangular region to display within an element. However, it requires the element to be absolutely positioned:

.container {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
}

css:url() References

Unfortunately, the clip() property cannot be used directly with css:url() references. However, you can create a new image element that has the desired clipped portion and then use that image as the background-image of the original element:

#element {
  background-image: url(clip.png);
  background-position: 50% 0%;
}

The above is the detailed content of How Can I Display a Specific Portion of an Image Using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!