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.
CSS clip rect explained
in CSS
Posted
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
31 32 33 34 35
41 42 43 44 45
51 52 53 54 55
11
21
31
41
51
11 12 13 14 15
13 14 15
23 24 25
33 34 35
43 44 45
53 54 55
Note to w3Schools: Please correct your explanation.