如何在CSS精灵中缩放图像
在这篇名为http://css-tricks.com/css-sprites/的文章中，它讨论了如何从1张较大的图像中裁剪出较小的图像。您能告诉我是否有可能/如何裁剪一张较小的图像，然后在布局之前缩放裁剪的区域？
下面是这篇文章中的一个例子：
A
{
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/3deb155981/spriteme1.png);
background-position: -10px -56px;
}我想知道在从spriteme1.png中裁剪图像后如何缩放该图像
以下是示例的URL：http://css-tricks.com/examples/CSS-Sprites/Example1After/
所以我想知道我是否可以将Item1,2,3,4旁边的图标变小？
回答 9
Stack Overflow用户
发布于 2010-03-19 00:41:24
当您使用精灵时，您将受到精灵中图像尺寸的限制。斯蒂芬提到的background-size CSS属性还没有得到广泛的支持，可能会在IE8及以下的浏览器上造成问题--考虑到它们的市场份额，这不是一个可行的选择。
解决这个问题的另一种方法是使用两个元素，并通过将其与img标记一起使用来缩放sprite，如下所示：
<div class="sprite-image"
style="width:20px; height:20px; overflow:hidden; position:relative">
<!-- set width/height proportionally, to scale the sprite image -->
<img src="sprite.png" alt="icon"
width="20" height="80"
style="position:absolute; top: -20px; left: 0;" />
</div>这样，外部元素(div.sprite-image)将从img标签裁剪出20x20px的图像，其作用类似于缩放的background-image。
Stack Overflow用户
发布于 2016-12-10 19:21:20
transform: scale();将使原始元素保持其大小不变。
我发现最好的选择是使用vw。它的效果就像一个护身符：
https://jsfiddle.net/tomekmularczyk/6ebv9Lxw/1/
#div1,
#div2,
#div3 {
background:url('//www.google.pl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png') no-repeat;
background-size: 50vw;
border: 1px solid black;
margin-bottom: 40px;
}
#div1 {
background-position: 0 0;
width: 12.5vw;
height: 13vw;
}
#div2 {
background-position: -13vw -4vw;
width: 17.5vw;
height: 9vw;
transform: scale(1.8);
}
#div3 {
background-position: -30.5vw 0;
width: 19.5vw;
height: 17vw;
}<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
Stack Overflow用户
发布于 2011-10-07 21:43:35
这是我为此所做的。请记住，它在IE8及更低版本上不起作用。
#element {
width:100%;
height:50px;
background:url(/path/to/image.png);
background-position:140.112201963534% 973.333333333333%;
}背景图像的宽度将随着#element的父级缩小而缩小。如果将height转换为百分比，也可以对其高度执行相同的操作。唯一棘手的是计算出background-position的百分比。
第一个百分比是当处于正常宽度时精灵目标区域的宽度除以精灵的总宽度，再乘以100。
第二个百分比是缩放前精灵目标区域的高度除以精灵的总高度，再乘以100。
这两个方程式的措辞有点草率，所以如果你需要我更好地解释它，请告诉我。
https://stackoverflow.com/questions/2430206
复制相似问题
腾讯云开发者
