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

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

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

如果想要讓圖片在一定寬度范圍內(nèi)自適應(yīng)縮放，可以這樣寫：

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

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

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