Jump to content

CSS clip rect explained


pashute
 Share

Recommended Posts

clip rect works as follows

 

clip:rect(clipTop, clipRight, clipBottom, clipLeft)

 

clipTop - Clips (erases image) from the point specified, back to the top of the image. The location within the image is counted from the top.

clipRight - Clips from the point specified till the right end of the image

The location within the image is counted from the left.

 

clipBot - Clips (erases image) from the point specified to the bottom of the image. The location within the image is counted from the top.

clipRight - Clips from the point specified, back, till the left end of the image

The location within the image is counted from the left.

 

For an image:

 

11 12 13 14 15

21 22 23 24 25

31 32 33 34 35

41 42 43 44 45

51 52 53 54 55

Directive: crop:rect(0, 0, 0, 0); // top, right, bottom, left
Action: Shows the whole image
Reason: Nothing was set to be cropped.Shows: the full image
------------------------------
Directive: crop:rect(2,0,0,0); // top right bottom leftAction: Crops the first two top rows, shows the remaining three rowsReason: It crops from the second row, until the top,Shows:

31 32 33 34 35

41 42 43 44 45

51 52 53 54 55

------------------------------
Directive crop:rect(0, 2, 0, 0) // top, right, bottom, left
Action: Crops 4 columns from the right, shows remaining single column (from the left) Reason: Crops from the second column to the left all the way to the right of the image

 

 

11

21

31

41

51

 

------------------------------
Directive: crop:rect(0,0,2,0); // top, right, bottom, leftAction: Crops the last four rows, shows the remaining first rowReason: It crops from the second row, until the bottom, Shows:

11 12 13 14 15

 

------------------------------
Directive crop:rect(0, 0, 0, 2) // top, right, bottom, left
Action: Crops the first two columns to the left, shows remaining three columns to the right Reason: Crops from the second column to the left all the way to the right of the image

 

 

13 14 15

23 24 25

33 34 35

43 44 45

53 54 55

 

Note to w3Schools: Please correct your explanation.

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...