在網頁設計中，我們時常會遇到需要縮小圖片的情況。如果直接將圖片的寬高固定，可能會產生變形或者過大過小的問題。這時候，我們可以使用CSS來讓圖片按比例縮小。下面就讓我們來介紹具體的實現方法。

img {
max-width: 100%; /* 圖片最大寬度為100% */
height: auto; /* 高度自適應 */
}

以上代碼實現的原理是指定圖片的最大寬度為100%，也就是圖片會隨著寬度的縮小而縮小，避免了圖片變形和寬度過大的問題。同時，我們也將高度屬性設為自適應，使圖片寬高按比例縮放。

如果想要讓圖片在一定寬度范圍內自適應縮放，可以這樣寫：

img {
max-width: 100%;
max-height: 400px; /* 圖片最大高度為400px */
width: auto; /* 寬度自適應 */
}

以上代碼將圖片的最大高度設置為了400px，同時將寬度設為自適應，使得在圖片超過400px高度時，會按比例縮小。當然，也可以將max-height設為一個比較大的值，這樣圖片在超過設定的高度時會按比例縮小。

總之，通過以上方式，我們可以使用CSS讓圖片按比例縮小，從而避免了圖片變形和過大過小的問題。這種方法是相對簡單易行的，也是網頁設計中必備的技能之一。