利用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" >

cabuchi 發表在 痞客邦 PIXNET 留言(0) 人氣()