缩放比例小于100％会改变他们的位置 [英] Scaling sprites below 100% alters their position
本文介绍了缩放比例小于100％会改变他们的位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我遵循了关于缩放草图的教程 http://tobyj.net/responsive-sprites/ - 当我将图像设置为100％，他们是罚款，但当我使用35％的值在我的媒体查询精灵图像被移位。
任何想法为什么？我的网站位于 http://edharrisondesign.com/pocketpictograms/
这是我的CSS：
＃icon-container {
position：
top：50％;
margin-top：-225px;
left：50％;
width：400px;
margin-left：-200px;
}
.icon img {
padding-bottom：150％;
}
/ *将max-width设置为您的各个sprites的宽度：* /
.stretchy {display：block;位置：相对; 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％;}
。弹性.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 =spaceralt =iconsrc =images / assets / spacer.png>
< img class =sprite salt =src =images / assets / spritesheet2.png>
< / a>
< a class =stretchy>
< img class =spaceralt =iconsrc =images / assets / spacer.png>
< img class =sprite s2alt =src =images / assets / spritesheet2.png>
< / a>
< a class =stretchy>
< img class =spaceralt =iconsrc =images / assets / spacer.png>
< img class =sprite s3alt =src =images / assets / spritesheet2.png>
< / a>
< a class =stretchy>
< img class =spaceralt =iconsrc =images / assets / spacer.png>
< img class =sprite s4alt =src =images / assets / spritesheet2.png>
< / a>
< a class =stretchy>
< img class =spaceralt =iconsrc =images / assets / spacer.png>
< img class =sprite s5alt =src =images / assets / spritesheet2.png>
< / a>
< a class =stretchy>
< img class =spaceralt =iconsrc =images / assets / spacer.png>
< img class =sprite s6alt =src =images / assets / spritesheet2.png>
< / a>
< a class =stretchy>
< img class =spaceralt =iconsrc =images / assets / spacer.png>
< img class =sprite s7alt =src =images / assets / spritesheet2.png>
< / a>
< a class =stretchy>
< img class =spaceralt =iconsrc =images / assets / spacer.png>
< img class =sprite s8alt =src =images / assets / spritesheet2.png>
< / a>
< a class =stretchy>
< img class =spaceralt =iconsrc =images / assets / spacer.png>
< img class =sprite s9alt =src =images / assets / spritesheet2.png>
< / a>
< a class =stretchy>
< img class =spaceralt =iconsrc =images / assets / spacer.png>
< img class =sprite s10alt =src =images / assets / spritesheet2.png>
< / a>
< a class =stretchy>
< img class =spaceralt =iconsrc =images / assets / spacer.png>
< img class =sprite s11alt =src =images / assets / spritessheet2.png>
< / a>
< a class =stretchy>
< img class =spaceralt =iconsrc =images / assets / spacer.png>
< img class =sprite s12alt =src =images / assets / spritesheet2.png>
< / a>
< a class =extensy>
< img class =spaceralt =iconsrc =images / assets / spacer.png>
< img class =sprite s13alt =src =images / assets / spritesheet2.png>
< / a>
< a class =stretchy>
< img class =spaceralt =iconsrc =images / assets / spacer.png>
< img class =sprite s14alt =src =images / assets / spritesheet2.png>
< / a>
< a class =stretchy>
< img class =spaceralt =iconsrc =images / assets / spacer.png>
< img class =sprite s15alt =src =images / assets / spritesheet2.png>
< / a>
< a class =stretchy>
< img class =spaceralt =iconsrc =images / assets / spacer.png>
< img class =sprite s16alt =src =images / assets / spritesheet2.png>
< / a>
< a class =stretchy>
< img class =spaceralt =iconsrc =images / assets / spacer.png>
< img class =sprite s17alt =src =images / assets / spritesheet2.png>
< / a>
< a class =stretchy>
< img class =spaceralt =iconsrc =images / assets / spacer.png>
< img class =sprite s18alt =src =images / assets / spritesheet2.png>
< / a>
< a class =stretchy>
< img class =spaceralt =iconsrc =images / assets / spacer.png>
< img class =sprite s19alt =src =images / assets / spritesheet2.png>
< / a>
< a class =stretchy>
< img class =spaceralt =iconsrc =images / assets / spacer.png>
< img class =sprite s20alt =src =images / assets / spritesheet2.png>
< / a>
< / div>
解决方案
看看这个小提琴：
它提供了我对 http：// tobyj.net/responsive-sprites/ 工作。
/ *
'stretchy' div。它做的是相对简单：
'float：left;'只是浮动左边。将其更改为float：right，它及其内容向右浮动。
'position：relative;'它相对于浏览器窗口的位置，意味着sprite在移动窗口时移动。将其更改为绝对，它们都保留在窗口的左上角，由于浮动左。
'overflow：hidden;'基本的精灵，因为他们总是小于他们的背景图像。将此更改为显示，您将在调整窗口大小时看到幕后发生了什么。我推荐这个，因为它帮助了我很多！
'最大宽度：160px'这防止精灵变得大于160px宽，你可以看到与右侧的精灵。
'width：35％'这将动态设置弹力的宽度。它总是浏览器窗口的35％。这里是真棒部分。这个数字可以调整到任何东西。它也影响高度，因为div是约束。
'margin：5％'这将设置边距宽度，它总是浏览器窗口的5％。注意，当你扩大和缩小窗口时，两个sprite之间的间隙是如何增长和收缩的？如果需要，也调整。
* /
.stretchy {
float：left;
position：relative;
overflow：hidden;
max-width：160px;
width：35％;
margin：5px;
}
/ *
'spacer'给出了每个精灵的宽度和高度的尺寸。他们是实现这一点的其他方法，但使用间隔，给你坚实，交叉兼容的结果。
'width：100％'将spacer的宽度设置为其父div的100％。
'display：block'确保分隔符占用可用的全宽。这可以防止当'spacer'小于160像素时背景图像向右滑动。通过将其改为内联（意味着间隔件占据尽可能小的位置），间隔件略微收缩。背景图像保持居中，但是因为弹性的溢出被设置为隐藏，它给出了背景图像向右移动不可理解的错觉。设置显示：到内联看看我的意思。
* /
.stretchy .spacer {
width：100％;
display：block;
}
/ *
'sprite'确保sprite保持在正确的位置，正好在spacer的顶部。
'position：absolute'使他们保持在他们的形象的顶部，并且不让他们移动。它使用接下来的两个类来定位div。
'top：0'div的顶部绝对定位到父div的顶部，spacer。
'left：0'div的左侧绝对位于父div的左侧，spacer。
'max-height：100％'这可以防止当div下降到160像素时背景图像滑动。它与spacer显示：块规则相结合。
* /
.stretchy .sprite {
position：absolute;
top：0;
left：0;
max-height：100％;
}
/ *
's2'和's3'只是精灵选择器。
'left：0％'将此更改为0％，100％，200％，300％400％或500％以更改图像。如果你输入一个超出这个范围的数字，你会看到间隔图像，给出精灵动态变化的尺寸。注意它们是百分比，而不是像素。这是因为百分比是相对测量。将背景图像移动超过100％将总是将背景图像移动与div相同的量，不管div是100像素还是1,000,000像素。这都是相对的。玩弄它，我相信你会得到它。
* /
.stretchy .sprite.s2 {
left：0％;
}
.stretchy .sprite.s3 {
left：-200％;
}
/ *'no-limit'简单地否定strechy的效果，当应用于div时，允许它无限伸展。* /
.stretchy.no-limit {
max-width：none;
}
.stretchy.no-limit .sprite {
min-height：100％;
}
如果需要，这里没有意见：
http://jsfiddle.net/7p8Ma/23/ p>
有时候最好只是捣蛋！
I've followed a tutorial on scaling sprites http://tobyj.net/responsive-sprites/ - when I set the images to 100% they are fine but when I use a value of 35% in my media queries the sprite images are displaced.
Any ideas why? My site is here http://edharrisondesign.com/pocketpictograms/
Here's my 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%;}
And the 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>
解决方案
Take a look at this fiddle:
It offers my insight into how http://tobyj.net/responsive-sprites/ works.
/*
'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%;
}
If needed, here it is without comments:
Sometimes it's best to learn from just mucking around!
这篇关于缩放比例小于100％会改变他们的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
