css - スプライトを100％未満にスケーリングすると、その位置が変わります

Question

スプライトのスケーリングに関するチュートリアルに従いましたhttp://tobyj.net/response-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/

時々、いじくり回すことから学ぶのが最善です!