CSS series Tutorial: Use clip to crop rectangular images

The following two points need to be paid attention to when using the clip attribute in the tutorial of helper House (www.bkjia.com:

1. the clip attribute must be used with the positioning attribute postion to take effect.

2. The coordinates of clip cropping are calculated from the upper left corner (0, 0), as shown in Figure 3. Unlike padding and margin, the right margin and bottom margin of the two are calculated from the rightmost and bottom.

Set the shape of the element in the clip attribute. This attribute defines a cropped rectangle. The content in this rectangle is visible, and the content in this cropping area is the same as that in overflow: hidden. The cropping area may be larger or smaller than the content area of the element.

Clip property value: auto | rect (top, right, bottom, left)

Auto indicates no cropping. The top-right, bottom-right, and left-left directions in rect indicate the cropping position.

Reference content is as follows: <Style> # Clip { Position: relative; Width: 259px; Height: 199px; Background: # FFF985; Margin: 0 auto; } # Clip img { Position: absolute; Clip: rect (21px 188px 161px 38px ); } </Style> <Div id = "Clip"> </Div>

The positioning attribute of div is set to relative positioning to enable the image to take it as the positioning standard, and the background is defined as # FFF985 to make the display effect more obvious. The absolute position of an image is relative to the div whose id is Clip. The values in clip are arranged in the upper-right and lower-left order.

This article