在網頁設計中，經常需要將非正方形的圖片裁剪成正方形的形式，以適應一些特殊的設計需求。下面我們介紹一種使用CSS截取圖片正方形的方法。

.square-image {
width: 300px;
height: 300px;
overflow: hidden;
}
.square-image img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
transform: translateX(-50%);
}

如上所示的代碼，我們首先創建一個盒子作為圖片的容器，并設置它的寬高為300px，同時將溢出部分隱藏。接著我們在盒子中插入一張圖片，設置圖片寬度為100%，高度自適應，并讓它在水平方向居中，最后使用translateX(-50%)屬性來使其垂直方向也居中。這樣就能夠截取出正方形的部分了。

以上代碼可以讓圖片完全覆蓋住盒子，并且不會有留白或者變形的情況發生。使用起來也非常簡單，只需要將類名設置為square-image即可。此外，我們還可以根據實際情況來調整盒子的尺寸及圖片的垂直居中效果，以達到最佳的視覺效果。