在網頁設計中，圖片的大小和比例經常需要調整以適應不同的設備和布局。使用CSS可以輕松實現圖片按比例縮放。

img {
max-width: 100%;
height: auto;
}

這段代碼會將圖片的最大寬度設置為其容器的寬度，保證圖片不會超出容器限制。同時，高度會根據寬度自動縮放，保持圖片的原始比例。

如果想要限制圖片的最大高度，可以將max-height屬性也設置為百分比：

img {
max-width: 100%;
max-height: 50%;
height: auto;
}

這段代碼會將圖片的最大高度限制為其容器高度的50%。同樣地，寬度會根據高度自動縮放，保持圖片的原始比例。

另外，如果想要強制圖片按比例縮放到特定的尺寸，可以設置width和height屬性的一個，另一個自動計算：

img {
width: 300px;
height: auto;
}

這段代碼會將圖片的寬度強制設置為300像素，高度隨之縮放，保持圖片的原始比例。如果將height設置為300像素，寬度也將按比例縮放。

使用CSS，我們可以輕松地實現圖片按比例縮放，保證在不同的設備和布局下都能夠合適地展示。