CSS clip rect explained

[pashute]

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.