Clip

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: sample 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.


Copyright © 2013-2022 Emw3.com
Some rights reserved