Clip an absolutely positioned image/element.
Syntax clip: shape | auto | inherit ;
shape - The rectangular area to clip: rect (top, right, bottom, left)in the units px, pt, em or auto
auto - Don't clip. (default)
inherit - inherit from the parent element.
If the value given for top is greater than 0 then the top side will be clipped.
If the value given for right is less than the width of the image/element the right side will be clipped.
If the value given for bottom is less than the height of the image/element the bottom side will be clipped.
If the value given for left is greater than 0 then the left side will be clipped.
Examples:
h1 { clip: rect(10px,auto,auto,auto); }
.emw3class { clip: rect(0,300px,auto,50px); }
#emw3id { clip: rect(25px,auto,auto,0); }
Try it:
This sample text includes an inline image: the CSS clip property will determine how much of the image to display on screen. This will only affect images that have an absolute position. |
(CSS 2) Browser Support: All major browsers.
“...to photograph is to frame, and to frame is to exclude” ~ Susan Sontag
Related:
Clip - MDN Web Docs.
position - Positioning method for an element. (static, relative, absolute or fixed)
vertical-align - Vertical alignment of an image/element.