Css Sprite 圖片等比縮放圖片大小

圖片大小80*40，即每張圖片大小40*40，如何以20*20顯示圖片？
1. 首先看下如何以40*40顯示第二張圖片：

正常顯示css代碼
.sprite {
background-image: url(spritesheet.png);
background-repeat: no-repeat;
display: block;
}
.sprite-circle {
width: 40px;
height: 40px;
background-position: -40px 0;
}
正常顯示html代碼
<i class="sprite sprite-circle"></i>

---

2. 接下來以20*20顯示第一張圖片：

等比例顯示css代碼
.sprite {
    background-image: url(spritesheet.png);
    background-repeat: no-repeat;
    display: block;
    background-size: 40px auto;  //背景圖片的寬度縮減到一半，高度自適應
}
.sprite-circle {     //圖片大小縮小到一半
    width: 20px;
    height: 20px;
    background-position: -20px 0;   //背景圖片的位置也相應的縮減到一半
}

等比例顯示html代碼
<i class="sprite sprite-circle"></i>

3.總結：
訣竅在於，背景圖片縮小固定的比例，背景圖片的偏移量也縮小相應的比例。