在網頁設計中，經常需要在頁面中添加圖片，但是有時候圖片的原始大小可能會導致頁面排版過于混亂，此時需要對圖片進行縮小處理。在 CSS 中，通過設置圖片的寬度來實現圖片的比例縮小。下面我們來了解一下具體的實現方法。

/* 代碼演示css圖片比例縮小 */
img {
width: 50%; /* 圖片寬度為原始寬度的50% */
}

如上代碼所示，我們使用了 CSS 中的 width 屬性來設置圖片寬度。通過將圖片的寬度設置為原始寬度的50%，來實現對圖片的比例縮小。

需要注意的是，以上代碼對圖片的高度沒有進行設置，此時瀏覽器會根據原始圖片的寬高比例，自動計算出圖片的高度。如果需要對圖片高度進行單獨設置，可以通過設置 height 屬性來實現。

/* 代碼演示css圖片比例縮小并設置高度 */
img {
width: 50%; /* 圖片寬度為原始寬度的50% */
height: 200px; /* 圖片高度為200像素 */
}

如上代碼所示，我們設置了圖片的高度為200像素，并通過設置寬度為原始寬度的50%，來實現圖片的比例縮小。

在實際開發中，根據具體的需求，可以靈活設置圖片的大小和比例。但是需要注意的是，在設置圖片寬高時，需要考慮到網頁排版問題，避免出現排版混亂的情況。