CSS圖片裁剪

CSS的裁剪功能可以幫助我們在頁面上只顯示圖片的一部分，達到特定的效果。

使用overflow屬性

最簡單的圖片裁剪方法是使用overflow屬性，將圖片的容器設置為固定大小，并且把overflow屬性設置為hidden。這樣，圖片就會被裁剪成容器的大小。

.container {
width: 400px;
height: 400px;
overflow: hidden;
}
.image {
width: 500px;
height: 500px;
}

使用position屬性

還可以使用position屬性將圖片定位到一個固定的位置，并且使用負的top和left值來實現裁剪。

.container {
width: 400px;
height: 400px;
overflow: hidden;
position: relative;
}
.image {
position: absolute;
top: -10px;
left: -40px;
width: 500px;
height: 500px;
}