在 Web 開發中，圖片是非常重要的一部分。然而，很多時候，我們會遇到圖片大小不一、比例不一致導致排版混亂的情況。這時，使用 CSS 統一裁剪圖片是一種比較常見的處理方式。

首先，我們需要選定需要裁剪的圖片的容器元素，并記錄其寬高比。然后，我們可以通過設置容器元素的overflow: hidden;屬性，來隱藏容器元素外的部分。此時，我們可以通過設置圖片元素的max-width: 100%;和max-height: 100%;屬性，保證圖片完全顯示在容器元素內。

<div class="image-container" style="aspect-ratio: 16/9;">
<img src="image.jpg">
</div>
.image-container {
position: relative;
width: 100%;
padding-top: calc(100% / (16 / 9));
overflow: hidden;
}
.image-container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}

在上述代碼中，我們通過設置容器元素的position: relative;和padding-top: calc(100% / (16 / 9));屬性，使其高度保持固定的比例。然后，我們設置圖片元素為絕對定位，并通過transform: translate(-50%, -50%);屬性，使其居中顯示在容器元素內。

總之，采用 CSS 統一裁剪圖片是一種簡單而有效的方法，可以使得圖片在比例上完美展示，同時也可以改善網站排版的美觀性。