CSS "cropping" the picture (showing part of the picture)

Background: A friend has a need, that is, the list page display of the picture to do the crop, or do not proportionally reduce the picture looks distorted. Originally think of a good solution is to use PHP to generate thumbnails, but tried several open source thumbnail class are not a satisfactory, suddenly think why not directly with CSS?

<style>    #sample {        width:100px;        height:100px;        Overflow:hidden;        position:relative;        border:1px solid black;    } </style><div id= "Sample" >     </div>

For example, if you have a picture that is 400x300 pixels, and then your list page is going to show a wide height of 100x100 pixels, what do you do?

1. Zoom out the image first, that is, set the height= "100px" of the IMG tag;

2. Crop, set the width height of the div enclosing the img tag to 100x100

3. Done!!!

CSS "cropping" the picture (showing part of the picture)