CSS實現圖片居中剪切是我們在網頁設計過程中常常會遇到的需求。下面我們來看一下如何使用CSS實現這個效果。

img {
max-width:100%;
height:auto;
object-fit:cover;
}

首先，我們需要將圖片的最大寬度設置為100%，高度自適應。這樣可以保證圖片按比例縮放，并且不會超出其容器。接下來我們使用object-fit: cover;屬性，它可以讓圖片居中，并裁切超出容器的部分。這樣，無論圖片的長寬比如何，都可以在其容器中居中顯示，并且保持完整性。

另外，如果我們想讓圖片具有圓形或其他形狀的樣式，可以將border-radius屬性設置為50%或其他值。例如：

.img-circle {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.img-circle img {
max-width: 100%;
height: auto;
object-fit: cover;
}

以上代碼會創建一個具有圓形形狀的圖片容器。容器的寬高相等，并設置為200像素。這樣就可以使圖片居中及裁切。同時，我們需要將容器的overflow屬性設置為hidden，否則圖片會超出圓形容器的范圍。

綜上所述，使用CSS實現圖片居中剪切是一種非常簡單且實用的技術。在網頁設計中，我們可以通過這種方式讓圖片更加美觀，并讓用戶的瀏覽體驗更加舒適。