將精靈縮小到100％以下會改變它們的位置

Question

我已經按照縮放精靈的教程http://tobyj.net/responsive-sprites/ - 當我將圖像設置爲100％時它們很好，但是當我在媒體查詢中使用35％的值時，精靈圖像是流離失所。

任何想法爲什麼？我的網站是在這裏http://edharrisondesign.com/pocketpictograms/

這裏是我的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>    

Answer 1

看看這個小提琴：

http://jsfiddle.net/7p8Ma/24/

，提供我的深入瞭解http://tobyj.net/responsive-sprites/的工作原理。

/* 
'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%; 
} 

如果需要的話，這裏是沒有註釋：

http://jsfiddle.net/7p8Ma/23/

有時，最好的不過是在混日子各地學習！