Css 将精灵缩放到100%以下会改变其位置

我遵循了有关缩放精灵的教程-当我将图像设置为100%时，它们很好，但当我在媒体查询中使用35%的值时，精灵图像将被置换

你知道为什么吗？我的网站在这里

以下是我的CSS：

     #icon-container {
    position: absolute;
    top: 50%;
    margin-top: -225px;
    left: 50%;
    width: 400px;
    margin-left: -200px;
}

    .icon img{
       padding-bottom: 150%; 
}

    /*Set the max-width to the width of your individual sprites:*/
    .stretchy { display:block; position:relative; overflow:hidden; width: 100%; max-width:400px; margin: 0 auto; }

    .stretchy .spacer { width: 100%; height: auto; }
    .stretchy .sprite { position:absolute; top:0; left:0; max-width:none; max-height:100%; }
    .stretchy .sprite.s2 {left:-100%;}
    .stretchy .sprite.s3 {left:-200%;}
    .stretchy .sprite.s4 {left:-300%;}
    .stretchy .sprite.s5 {left:-400%;}
    .stretchy .sprite.s6 {left:-500%;}
    .stretchy .sprite.s7 {left:-600%;}
    .stretchy .sprite.s8 {left:-700%;}
    .stretchy .sprite.s9 {left:-800%;}
    .stretchy .sprite.s10 {left:-900%;}
    .stretchy .sprite.s11 {left:-1000%;}
    .stretchy .sprite.s12 {left:-1100%;}
    .stretchy .sprite.s13 {left:-1200%;}
    .stretchy .sprite.s14 {left:-1300%;}
    .stretchy .sprite.s15 {left:-1400%;}  
    .stretchy .sprite.s16 {left:-1500%;}
    .stretchy .sprite.s17 {left:-1600%;}
    .stretchy .sprite.s18 {left:-1700%;}
    .stretchy .sprite.s19 {left:-1800%;}
    .stretchy .sprite.s20 {left:-1900%;}

以及HTML：

    <div id="icon-container">
    <a class="stretchy">
        <img class="spacer" alt="icon" src="images/assets/spacer.png">
        <img class="sprite s" alt="" src="images/assets/spritesheet2.png">
    </a>            
    <a class="stretchy">
        <img class="spacer" alt="icon" src="images/assets/spacer.png">
        <img class="sprite s2" alt="" src="images/assets/spritesheet2.png">
    </a>            
    <a class="stretchy">
        <img class="spacer" alt="icon" src="images/assets/spacer.png">
        <img class="sprite s3" alt="" src="images/assets/spritesheet2.png">
    </a>    
    <a class="stretchy">
        <img class="spacer" alt="icon" src="images/assets/spacer.png">
        <img class="sprite s4" alt="" src="images/assets/spritesheet2.png">
    </a>            
    <a class="stretchy">
        <img class="spacer" alt="icon" src="images/assets/spacer.png">
        <img class="sprite s5" alt="" src="images/assets/spritesheet2.png">
    </a>    
    <a class="stretchy">
        <img class="spacer" alt="icon" src="images/assets/spacer.png">
        <img class="sprite s6" alt="" src="images/assets/spritesheet2.png">
    </a>            
    <a class="stretchy">
        <img class="spacer" alt="icon" src="images/assets/spacer.png">
        <img class="sprite s7" alt="" src="images/assets/spritesheet2.png">
    </a>            
    <a class="stretchy">
        <img class="spacer" alt="icon" src="images/assets/spacer.png">
        <img class="sprite s8" alt="" src="images/assets/spritesheet2.png">
    </a>    
    <a class="stretchy">
        <img class="spacer" alt="icon" src="images/assets/spacer.png">
        <img class="sprite s9" alt="" src="images/assets/spritesheet2.png">
    </a>            
    <a class="stretchy">
        <img class="spacer" alt="icon" src="images/assets/spacer.png">
        <img class="sprite s10" alt="" src="images/assets/spritesheet2.png">
    </a>        
    <a class="stretchy">
        <img class="spacer" alt="icon" src="images/assets/spacer.png">
        <img class="sprite s11" alt="" src="images/assets/spritesheet2.png">
    </a>            
    <a class="stretchy">
        <img class="spacer" alt="icon" src="images/assets/spacer.png">
        <img class="sprite s12" alt="" src="images/assets/spritesheet2.png">
    </a>            
    <a class="stretchy">
        <img class="spacer" alt="icon" src="images/assets/spacer.png">
        <img class="sprite s13" alt="" src="images/assets/spritesheet2.png">
    </a>    
    <a class="stretchy">
        <img class="spacer" alt="icon" src="images/assets/spacer.png">
        <img class="sprite s14" alt="" src="images/assets/spritesheet2.png">
    </a>            
    <a class="stretchy">
        <img class="spacer" alt="icon" src="images/assets/spacer.png">
        <img class="sprite s15" alt="" src="images/assets/spritesheet2.png">
    </a>            
    <a class="stretchy">
        <img class="spacer" alt="icon" src="images/assets/spacer.png">
        <img class="sprite s16" alt="" src="images/assets/spritesheet2.png">
    </a>    
    <a class="stretchy">
        <img class="spacer" alt="icon" src="images/assets/spacer.png">
        <img class="sprite s17" alt="" src="images/assets/spritesheet2.png">
    </a>            
    <a class="stretchy">
        <img class="spacer" alt="icon" src="images/assets/spacer.png">
        <img class="sprite s18" alt="" src="images/assets/spritesheet2.png">
    </a>        
    <a class="stretchy">
        <img class="spacer" alt="icon" src="images/assets/spacer.png">
        <img class="sprite s19" alt="" src="images/assets/spritesheet2.png">
    </a>            
    <a class="stretchy">
        <img class="spacer" alt="icon" src="images/assets/spacer.png">
        <img class="sprite s20" alt="" src="images/assets/spritesheet2.png">
    </a>            
</div>             

---

看看这把小提琴：

它提供了我对工作原理的见解

如有需要，此处无需注释：

---

有时候，最好从混日子中学习

看看这把小提琴：

它提供了我对工作原理的见解

如有需要，此处无需注释：

---

有时候，最好从混日子中学习

只有当你达到35%时才会发生这种情况吗？不-任何百分比都会升高或降低，而且你从100%得到的距离越远，图像被置换的距离就越远。我不知道发生了什么，给我一点时间做一个jsfiddle告诉你：l只有当你达到35%时才会发生这种情况吗？不-任何百分比都会升高或降低，你从100%得到的图像越远，你知道发生了什么，给我一点时间做一个JSFIDLE给你看：L

/*
'stretchy' is a container div. What it does is relatively simple:

'float: left;' Simply floats it left. Change it to 'float:right' and it and its contents float right.

'position: relative;' Positions it relative to the browser window, meaning the sprites move as you move the window. Change this to absolute, and they both stay in the top left of the window, due to the float left.

'overflow: hidden;' Essential for sprites, as they are always smaller than their background image. Change this to 'show', and you'll see what's going on 'behind the scenes' as you resize the window. I'd recommend this, as it helped me a lot!

'max width: 160px' This prevents the sprite from becoming larger than 160px wide, as you can see with the sprite on the right. 

'width: 35%' This sets stretchy's width, dynamically. It will always be 35% of the browser window. Here's the awesome part. This number can be tweaked to anything. It also effects the height because the div is constrained.

'margin: 5%' This sets the margin width, which will always be 5% of the browser window. Notice how the gap between the two sprites grows and shrinks as you widen and narrow the window? Tweak also if needed.
*/
 .stretchy {
    float:left;
    position: relative;
    overflow: hidden;
    max-width:160px;
    width:35%;
    margin: 5px;
}
/*
'spacer' gives each sprite its dimensions, both in width and height. They are other methods of achieving this, but using a 'spacer' gives you solid, cross-compliant results.

'width: 100%' Sets the width of spacer to 100% of its parent div.
'display: block' Ensures the spacer takes up the full width available. This prevents the background image from sliding to the right when 'spacer' falls under 160px. By changing this to inline (meaning spacer takes up as little place as possible) the spacer shrinks slightly. The background image stays centered, but because stretchy's overflow is set to 'hidden' it gives the illusion that the background image is moving inexplicably to the right. Set display: to inline to see what I mean. 
*/
 .stretchy .spacer {
    width: 100%;
    display: block;
}
/*
'sprite' makes sure the sprites stay in the correct position, exactly ontop of the spacer. 

'position: absolute' makes them stay exactly ontop of their image, and doesn't let them move. It uses the next two classes to posistion the div.

'top:0' The top of the div is absolutely positioned to the top of the parent div, spacer.

'left:0' The left side of the div is absolutely positioned to the left of the parent div, spacer.

'max-height: 100%' This prevents the background-image from sliding when the div falls under 160px. It works in conjuction with 'spacer's display: block rule.
*/
 .stretchy .sprite {
    position:absolute;
    top:0;
    left:0;
    max-height:100%;
}
/* 
's2' and 's3' are simply sprite selectors.

'left: 0%' Change this to either 0%, 100%, 200%, 300% 400% or 500% to change the image. If you put in a number outside of this range, you will see the spacer image that gives the sprite its dynamically changing dimensions. Notice how they are percentages, rather than pixels. This is because percentages are a relative measurement. Moving the background image over 100% will always move the background-image over the same amount as the div, whether the div be 100px across or 1,000,000px across. It's all relative. Play around with it and I'm sure you'll get it.
*/
 .stretchy .sprite.s2 {
    left:0%;
}
.stretchy .sprite.s3 {
    left:-200%;
}
/*'no-limit' simply negates the effect of strechy, and when applied to a div allows it to stretch infinitely.*/
 .stretchy.no-limit {
    max-width: none;
}
.stretchy.no-limit .sprite {
    min-height: 100%;
}