1

由于某种原因，我的实时网站上的图像（来自精灵表）与本地版本的位置不同。这让我疯狂！在检查元素时，似乎精灵表在活动时的缩放比例略有不同，这使图像比我想要的更右移动。任何想法为什么？

提前谢谢了！

的HTML：

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

CSS：

.stretchy {display:block; position:relative; overflow:hidden; max-width:400px; }

.stretchy .spacer { width: 100%; height: auto; }
.stretchy .sprite {
     position:absolute; top:-5px; left:0; max-width:none; max-height:100%;
 }
.stretch img { width: 100%; }

.stretchy .sprite.s2 {left:-103%;}
.stretchy .sprite.s3 {left:-205%;}
.stretchy .sprite.s4 {left:-307%;}
.stretchy .sprite.s5 {left:-407%;}
.stretchy .sprite.s6 {left:-508%;}
.stretchy .sprite.s7 {left:-608%;}
.stretchy .sprite.s8 {left:-709%;}
.stretchy .sprite.s9 {left:-811%;}
.stretchy .sprite.s10 {left:-911%;}
.stretchy .sprite.s11 {left:-1012%;}
.stretchy .sprite.s12 {left:-1113%;}
.stretchy .sprite.s13 {left:-1216%;}
.stretchy .sprite.s14 {left:-1318%;}
.stretchy .sprite.s15 {left:-1418%;}

本地网站

直播网站

4

3 回答 3

3

该.icon课程的宽度为 20%，比.parallelogram我屏幕上的口袋还宽。口袋的缩放应该与图标缩放同步……否则与图标相比，口袋会太小或偏离中心。

编辑：这里是一个用于尝试东西的 jsfiddle：http: //jsfiddle.net/adnrz/ 随着媒体查询在某些时候你可以缩放口袋，但不再是图标，因此口袋被拖到一边。并且在最小的屏幕尺寸上，您不会在正确的位置剪切图标，因此您会显示两个半图标。

于 2013-03-11T22:02:15.863 回答
3

我会将口袋和图标都放在

position: absolute;
left: 50%;

并添加

margin-left: -HALF_THEIR_WIDTH;

我会对垂直定位做同样的事情（我想你知道上面的阅读方式）

从我在您的网页上看到的内容来看，您正在以一种糟糕的方式将固定像素值与百分比混合在一起。

祝你好运。

于 2013-03-11T22:28:10.120 回答
3

使用的 CSS 比您发布的行多一点...骨架.css 例如，您还使用带 % 的宽度...猜猜这就是原因。

于 2013-03-11T21:59:46.730 回答