2022/7/27

在網頁設計上，有時我們只要擷取圖片的一部分時，若是還要另外切圖片的話又會顯得累贅，這時我們可以用CSS的屬性來自由裁切圖片囉！

css的overflow屬性

設定成overflow: hidden就可以將多餘的圖片隱藏起來，並利用margin來控制要顯示的部分。

範例：

原本的完整圖片

div{ background:#F99; padding:20px; width:500px; text-align:center;}
img{mix-blend-mode: normal;}

使用css裁切過後

.img-demo {
height:200px;
overflow:hidden;
border:1px solid #ccc;
}

.img-demo img{
margin-top: -5%;
}

css的clip屬性

clip的屬性值僅有rect( 矩形 )，其值為 rect (top, right, bottom, left)，預設值為auto，而必須注意的是此屬性要有position:absolute才會生效，圖片顯示範圍的計算為top減掉bottom為顯示範圍的高，right減掉left為顯示範圍的寬。

範例：

<div class="img-demo">
<img src="http://photosku.com/images_file/small_images/s000_496.jpg">
</div>