CSS’s clip property can be used to change the size of an image, but in a different way than using the width and height properties would. The width and height elements are used to adjust the size and scale of an entire image, but the clip property just clips an image, so that it can fit within an particular element, even if the entire image isn’t actually showing. Essentially, it cuts the image off.
Using the clip property is actually pretty easy, because it only takes one property : rect(top, right, bottom, left).
This property is used to define the shape (it has to be rectangle) and the top, right, bottom, and left values (these values represent the coordinates that are meant to be clipped from the top-left corner of the element.
The property doesn’t work if the overflow property is set to visible, and it also won’t work unless the position property of your image element is set to absolute. Make sure you have these two things in order before trying to apply the clip property to your image elements.
If you want to see an example of how you’d use the clip property to clip an image, take a look at the CSS and the screenshot below.
First, the CSS:
img{
position: absolute;
clip: rect(0, 160px, 200px, 0)
}
There’s no need to set the overflow property to hidden, because hidden is the default value.
The clipped image in the example above looks something like this:
You might not be able to tell from the example, but the original image extended much farther to the right than this image does, and it has been clipped considerably thanks to the clip property. Now that you understand the basics of the clip property, it’s your turn to play around with it and see if you can really master it. The best way to fully understand how to use a property is to use it yourself in a real world context. Happy coding!