css - 缩放精灵低于 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/

有时最好从胡闹中学习！