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