小 春 日 和

利用css裁剪圖片有兩種方法，如下：

【方法一】

可以利用overflow: hidden;屬性，把多出來的圖片隱藏起來

在最裡面那層img，利用margin去調整圖片要顯示出來的位置  

div.field-content {
border: 1px solid #333;
overflow: hidden;
height: 113px;

img.youtube_thumb {
width: 193px;
margin-top: -20px;
}

<div class="field-content">
<img class="youtube_thumb" src="http://i1.ytimg.com/vi/lLY2qLD24P4/default.jpg">
</div>

【方法二】範例預覽

css裡面有參數clip:rect，可以設定圖片顯示的寬高

使用此參數必加上position:absolute，才會有效果。 

img
{
position:absolute;　
clip:rect(0px,50px,200px,0px);   //(上,右,下,左)  預設:上左為0，右下為圖的寬高
}

<img border="0" src="/i/eg_bookasp.gif" >