Using CSS to "Crop" Images

Advantage: very fast, no extra memory cost,and very easy to learn.
Output: Original picture partially displayed, with html/css tags in source code

Example:
#photoclip {
position:absolute;
height: 100px;
width: 50px;
clip: rect(0px, 100px, 40px, 0px);
overflow: hidden;
background: url(yourimagelocation);
}

Here, the rect() function accepts 4 variables. first two are the coords of the starting point of the cropping rectangle. The last two are cropping width, and cropping height.

"Overflow:hidden" means it will hide everything else outside of the cropping rectangle.

then in the html, you need to call the css style in div:

and also you can define the "width" and "height" of the dive .

Disadvantage:
When right clicking the pic and save , it is still the original picture. It is not actually cropping it, but hiding part of the picture.