CSS可以幫助我們控制圖片的大小和位置，并且還可以截斷圖片的顯示。有時候我們需要截斷一張圖片來達到自己想要的效果，這時CSS就能派上用場了。下面我們就來詳細講一下CSS圖片截斷顯示的方法。 首先，我們需要使用CSS中的overflow屬性來控制圖片的大小和截斷。這個屬性可以設(shè)置為hidden、scroll、auto等。我們這里選用hidden。

img {
width: 200px;
height: 200px;
overflow: hidden;
}

以上代碼的作用是將圖片的寬度和高度均設(shè)為200px，并且將overflow屬性設(shè)置為hidden，這樣圖片就會被截斷顯示了。 如果我們只想截斷圖片的頂部或底部，可以使用CSS中的clip屬性。這個屬性可以設(shè)置圖片的左上角和右下角的坐標，從而裁剪出我們需要的部分。

img {
position: absolute;
clip: rect(0px, 200px, 100px, 0px);
}

以上代碼的作用是將圖片的左上角設(shè)置為(0px,0px)，右下角設(shè)置為(200px,100px)，這樣圖片就被裁剪出了寬度為200px，高度為100px的部分。 最后，我們還可以使用CSS中的background屬性來達到截斷圖片的效果。這個屬性可以使用圖片作為背景，并指定背景位置以及背景大小。

div {
background-image: url('image.jpg');
background-position: 0 -100px;
background-size: 100% 100px;
width: 200px;
height: 100px;
}

以上代碼的作用是將一張圖片作為div的背景，將背景位置調(diào)整為(0,-100px)，將背景大小設(shè)為100%的寬度和100px的高度，這樣就截斷了圖片的顯示。 通過以上方法，我們可以輕松地實現(xiàn)CSS圖片截斷顯示的效果，使圖片在網(wǎng)頁上呈現(xiàn)我們需要的形狀和大小。