CSS 裁剪圖片正方形能夠幫助網頁設計師更好地處理圖片的展示，今天我們就來簡單介紹一下如何用 CSS 實現圖片的正方形裁剪效果。

.square-image {
width: 200px;
height: 200px;
overflow: hidden;
}
.square-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

如上是一個簡單的 CSS 代碼，通過設定固定的寬高比例和 overflow:hidden 隱藏多余的部分，來實現圖片的裁剪效果。同時，為了能夠保留圖片的真實比例，我們使用 object-fit: cover 屬性，讓圖片能夠完美填充整個盒子的內部。

這樣一來，我們就可以通過簡單的 CSS 代碼來實現圖片的正方形裁剪效果，讓我們的網站更加美觀大方。