在網頁開發中，圖片作為重要的視覺元素，扮演著不可或缺的角色。而其中一個常見的問題是，如何在不失真的情況下，按照所需要的比例設置圖片大小呢？

HTML5提供了一種簡單的方法，通過CSS的background-size屬性，可以按照比例設置圖片大小。

// HTML結構
<div class="image"></div>
// CSS樣式
.image {
background-image: url('example.jpg');
background-repeat: no-repeat;
background-size: 100% auto;
/* 如果需要按照固定比例設置圖片大小，需要替換成對應的值，如
background-size: 50% 50%; */
}

如上述代碼所示，在HTML中創建一個div，并給其設置一個Class名稱為“image”，通過CSS給該div設置背景圖片，并設置其background-size屬性。其中，background-size的兩個參數分別為橫向縮放比例和縱向縮放比例。

例如，若想讓圖片按照一定比例縮放，可以將background-size替換為對應的值，如：background-size: 50% 50%;

通過這種方法，可以輕松實現網頁中圖片的比例縮放，并可以根據不同的需求進行自由控制。其中，通過CSS的background-image屬性，還可以控制所需要的圖片路徑和背景重復模式等。