Definition and Usage
This property allows a replaced element to be just a rectangular area of an object, instead of the whole object. The 'crop' property adds a step when determining the intrinsic dimensions of an element. With 'crop', the notion of computed intrinsic width and height are introduced. When the layout algorithms reference the "intrinsic width" (and/or height), they are referring to the computed intrinsic width and height. The computed intrinsic width and height of an element are the result of applying the crop to the actual intrinsic width and height of the element.
| Name: | crop |
| Values: | <shape> | auto |
| Initial: | auto |
| Applies To: | replaced elements |
| Inherited: | no |
| Percentages: | relative to intrinsic size |
| Media: | visual |
| Computed value: | The specified value. |
Syntax
crop: <shape> | auto;
Values
- 'auto'
- The element's computed intrinsic width and height are the same as its actual intrinsic width and height.
- rect(top, right, bottom, left)
- Each of the four arguments can be a <length> or a <percentage>. All percentage values are computed relative to the intrinsic dimensions of the element, if there is one. Values are offsets relative to the top left of the element. The computed intrinsic width and height of the element are determined by subtracting the left from the right for the width, and similarly top from bottom for the height. However, if this computation results in a negative value, it is considered to be zero.
- inset-rect(top, right, bottom, left)
- Like rect(), except that the values are offsets relative to the respective edges of the element.
Examples
.thumbnail { crop: rect(0px, 115px, 85px, 30px) }
