在網頁設計中，背景圖和位圖往往是設計中最基本的元素，而 CSS 可以幫助我們很好地實現圖片等比例縮放。

background-image: url('example.jpg');
background-size: cover;
background-position: center center;

利用這個簡單的 CSS 代碼，我們就可以實現一個全屏幕的背景圖，而且不管用戶的屏幕大小，圖片總是能夠等比例縮放，不失真。

同樣地，我們也可以在網頁中使用圖片作為元素，可以用如下的 CSS 代碼來控制圖片的等比例縮放：

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

這段代碼將圖片的最大寬度設置為 100%，這樣無論用戶的屏幕大小如何，圖片都可以等比例縮放。同時，將圖片的高度設置為自動，這樣就可以保證圖片的寬高比例不會失調。

除了背景圖和圖片元素，我們還可以在設計中使用精靈圖，這也可以借助 CSS 來實現等比例縮放：

.sprite {
display: inline-block;
background-image: url('spritesheet.png');
background-repeat: no-repeat;
}
.icon-message {
width: 20px;
height: 20px;
background-position: -30px -50px;
}
.icon-phone {
width: 25px;
height: 25px;
background-position: -10px -70px;
}

這段代碼中，我們首先將所有的精靈圖合并成一張大圖片，然后將每一個子元素的寬度和高度設置成我們需要的大小，同時設置它們的背景位置。這樣，我們就可以方便地管理多個小圖標，而且依然能夠保證每個圖標都可以按照等比例縮放的方式來展示。