css “裁剪”圖片（顯示圖片的一部分）

背景：朋友有一個需求，就是列表頁顯示的圖片要做裁剪，不然不按比例縮小圖片看起來就變形了。本來想好的解決辦法是用PHP來生成縮略圖，然而試了好幾個開源縮略圖類都沒有一個滿意的，突然想到為什么不直接用CSS呢？

<style>
    #sample{
        width:100px;
        height:100px;
        overflow:hidden;
        position: relative;
        border: 1px solid black;
    }
</style>
<div id="sample">
    <img src="150113-4.jpg" height="100px"/> 
</div>

比如你有一張圖片是400x300像素的，然后你的列表頁要顯示的寬高是100x100像素,這時候怎么辦呢?

1. 先按比例縮小圖片，即設置img標簽的height="100px"　;

2. 裁剪, 設置包圍img標簽的div的寬高為100x100

3. done !!!