Css Sprite picture size than zoom image

Picture size 80*40, that is, each picture size 40*40, how to display pictures in 20*20?
1. First look at how to display the second picture in 40*40:

normal display of CSS code . Sprite {background-image:url (spritesheet.png); background-repeat:no-repeat;display:block;}. sprite-circle {width:40px;height:40px;background-position: -40px 0;} Normal display HTML code <i class= "Sprite sprite-circle" ></i>

2. Next, display the first image in 20*20:

proportional display of CSS code . Sprite {    background-image:url (spritesheet.png);    Background-repeat:no-repeat;    Display:block;    background-size:40px Auto;  The width of the background image is reduced to half, and the height adaptive}.sprite-circle {     //Picture size shrinks to half    width:20px;    height:20px;    Background-position: -20px 0;   The position of the background image is also reduced to half the corresponding scale display HTML code <i class= "Sprite sprite-circle" ></i>

3. Summary:
The trick is that the background image shrinks to a fixed scale, and the offset of the background image shrinks accordingly.

Css Sprite picture size than zoom image