在網頁開發中，經常需要對圖像進行縮放以適應不同的屏幕尺寸。同時，為了保持圖像的比例不變，我們也需要按比例縮放圖像。CSS提供了多種方式來實現圖像按比例縮放。

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

上述代碼的作用是將圖像的最大寬度設置為100%，同時保持圖像的高度自適應，即按比例縮放。

img {
width: 50%;
height: auto;
}

這段代碼將圖像的寬度設置為50%，同時保持高度自適應，也實現了按比例縮放。但是，如果圖像的寬高比不是1:1，那么縮放后會失去原有的比例。

div {
width: 50%;
height: 0;
padding-bottom: 50%;
background-image: url(image.jpg);
background-size: cover;
}

這段代碼將一個div元素的寬度設置為50%，同時設置padding-bottom為50%。這樣，div元素的高度就是寬度的50%，保證了寬高比例。接著，使用background-image將圖像作為div元素的背景，并設置background-size為cover，可以讓圖像完整地覆蓋div元素。

綜上所述，我們可以使用上述任意一種方式來實現圖像的按比例縮放，具體根據需求來選擇合適的方法。