如何在 CSS 精灵中缩放图像

小开

尝试使用背景大小: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

是不是有什么东西阻止你把图像渲染成你一开始就想要的尺寸？

小开

当您使用精灵时，您受限于精灵中图像的尺寸。Stephen 提到的 background-size CSS 属性还没有得到广泛的支持，可能会给 IE8及以下的浏览器带来问题——考虑到它们的市场份额，这不是一个可行的选择。

解决这个问题的另一种方法是使用两个元素，通过使用带有 img标签的精灵来缩放它，如下所示:

<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。

小开

下面是我所做的。请记住，它在 IE8及以下版本上无法工作。

#element {
width:100%;
height:50px;
background:url(/path/to/image.png);
background-position:140.112201963534% 973.333333333333%;
}

背景图像的宽度将随着 #element的父级缩小而缩小。如果将 height转换为百分比，也可以对其高度执行同样的操作。唯一棘手的是计算出 background-position的百分比。

第一个百分比是精灵的目标区域的宽度，当在正常宽度除以精灵的总宽度，再乘以100。

第二个百分比是被缩放前精灵目标区域的高度除以精灵的总高度，再乘以100。

这两个方程式的措辞有点草率，所以如果你需要我更好地解释，请告诉我。

小开

试试这个: < strong > Stretchy Sprites -跨浏览器，响应调整/拉伸 CSS Sprite 图像

此方法“响应地”缩放精灵，以便根据浏览器窗口大小调整宽度/高度。它的 没有用 background-size作为支持这在旧的浏览器是不存在的。

CSS

.stretchy {display:block; float:left; position:relative; overflow:hidden; max-width:160px;}
.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%;}

超文本标示语言

<a class="stretchy" href="#">
<img class="spacer" alt="" src="spacer.png">
<img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
<a class="stretchy s2" href="#">
<img class="spacer" alt="" src="spacer.png">
<img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
<a class="stretchy s3" href="#">
<img class="spacer" alt="" src="spacer.png">
<img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>

小开

2021年更新 : 大多数主流浏览器都支持背景大小，但是如果你的移动浏览器不支持缩放的话。

您可以使用 背景尺寸，因为它受到大多数浏览器的支持(但不是所有的 http://caniuse.com/#search=background-size)

background-size : 150% 150%;

或者

你可以将放大组合用于 webkit/blink/ie，变革: 规模组合用于 Mozilla (- moz -) ，Opera (- o -)组合用于跨浏览器桌面和移动设备

[class^="icon-"]{
display: inline-block;
background: url('../img/icons/icons.png') no-repeat;
width: 64px;
height: 51px;
overflow: hidden;
zoom:0.5;
/* Mozilla support */
-moz-transform:scale(0.5);
-moz-transform-origin: 0 0;
}


.icon-big{
zoom:0.60;
/* Mozilla support */
-moz-transform:scale(0.60);
-moz-transform-origin: 0 0;
}


.icon-small{
zoom:0.29;
/*  Mozilla support */
-moz-transform:scale(0.29);
-moz-transform-origin: 0 0;
}

小开

我认为找到了一个更简单的缩放图像的解决方案: 示例-让我们假设有一个图像有3个相同大小的精灵，你想使用，使用 CSS 来缩放图像

background-size : 300% 100%;

然后指定需要应用到 html 元素的自定义高度和宽度，例如:

 width :45%;
height:100px;

示例代码如下所示:

.customclass {
background: url("/sample/whatever.png") 0 0 no-repeat ;
background-size : 300% 100%;
width :45%;
height:100px;
}

我相当新的 CSS，和造型不是我最好的领域，这可能是一个错误的方式做它。.但是它在 Firefox/Chrome/Explorer 10中对我很有用，希望在旧版本中也能用。.

小开

将宽度和高度设置为精灵图像的包装元素。

{
background-size: cover;
}

小开

旧的帖子，但是这里是我使用 background-size:cover;所做的(给@Ceylan Pamir 的帽子提示) ..。

示例用法
水平圆形翻转(悬停在正面图像上，翻转到背面与不同的图像)。 < br >

例子精灵
480px x 240px < br >

最终尺寸示例
单幅图像@120px x 120px

通用代码
{正面{宽: 120px，高: 120px，背景: url ( http://www.example.com/images/image_240x240.png ) ，背景-大小: 封面，背景-重复: 禁止重复，背景-位置: 0px 0px，}

背景: url ( http://www.example.com/images/image_240x240.png ) ; 背景: 大小: 封面; 背景: 重复: 不重复; 背景: 位置:-120px/0px; }

缩写的小提琴手
Http://jsfiddle.net/zuhloobie/133esq63/2/

小开

很简单... 用两个不同比例的相同图像复制到精灵的表格上。根据应用程序的逻辑设置坐标和大小。

小开

我花了很长时间才找到了一个我满意的解决方案:

问题:

一个由图标组成的 SVG 精灵-比如80px x 3200px
我们希望将它们在内容选择器(: before/: after)中的每次使用扩展到不同大小的不同位置，而不需要根据所使用的大小重新定义每个精灵的坐标。

因此，这个解决方案允许你使用相同的精灵坐标在 <button>作为一个 <menuitem>，同时仍然缩放它。

[data-command]::before {
content: '';
position: absolute;
background-image: url("images/sprite.svgz");
background-repeat: no-repeat;
background-size: cover;
}


button[data-command]::before {
width: 32px;
height: 32px;
}


menuitem[data-command]::before {
width: 24px;
height: 24px;
}


[data-command="cancel"]::before {
background-position: 0% 35%;
}


[data-command="logoff"]::before {
background-position: 0% 37.5%;
}

通过在背景位置使用百分比(到小数点后2位) ，而不是像这里其他人建议的那样使用背景大小，您可以将相同的图标声明缩放到任意大小，而不需要重新声明它。

位置-y 百分比是原始精灵高度/图标高度的%-在我们的例子中，80px * 100/3200px = = 每个精灵用2.5% 的 y 位置表示。

如果您有悬停/鼠标悬停状态，您可以将精灵的宽度加倍，并在位置-x 坐标中指定。

这种方法的缺点是，在以后添加更多的图标会改变精灵的高度和 y 位置% ，但如果你不这样做，那么你的精灵坐标将需要为每个缩放分辨率你需要改变。

小开

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>

小开

使用 transform: scale(...);并添加匹配的 margin: -...px来弥补缩放带来的空闲空间(可以使用 * {outline: 1px solid}查看元素边界)。

小开

2018年在这里 使用背景大小和百分比。

表:

这里假设有一排精灵。工作表的宽度应为 可以被一个精灵的100 + 宽度整除的数字。如果您有30个精灵是108x108像素，那么添加额外的空白空间到末尾，使最终的宽度为5508像素(50 * 108 + 108)。

CSS:

.icon{
height: 30px;  /* Set this to anything. It will scale. */
width: 30px; /* Match height. This assumes square sprites. */
background:url(<mysheeturl>);
background-size: 5100% 100%; /*  5100% because 51 sprites. */
}


/* Each image increases by 2% because we used 50+1 sprites.
If we had used 20+1 sprites then % increase would be 5%. */


.first_image{
background-position: 0% 0;
}


.ninth_image{
background-position: 16% 0; /* (9-1) x 2 = 16 */
}

HTML:

<div class ="icon first_image"></div>
<div class ="icon ninth_image"></div>

小开

我觉得这样挺好。

如果精灵位于网格中，则将 background-size设置为100% 的精灵数量，并且100% 的精灵数量下降。然后使用 background-position -<x*100>% -<y*100>%，其中 x 和 y 是基于零的精灵

换句话说，如果你想要第三个精灵从左边到第二行，那就是2除以1，所以

background-position: -200% -100%;

例如，这里有一个精灵表4x2精灵

举个例子

div {
margin: 3px;
display: inline-block;
}
.sprite {
background-image: url('https://i.stack.imgur.com/AEYNC.png');
background-size: 400% 200%;  /* 4x2 sprites so 400% 200% */
}
.s0x0 { background-position:    -0%   -0%; }
.s1x0 { background-position:  -100%   -0%; }
.s2x0 { background-position:  -200%   -0%; }
.s3x0 { background-position:  -300%   -0%; }
.s0x1 { background-position:    -0%  -100%; }
.s1x1 { background-position:  -100%  -100%; }
.s2x1 { background-position:  -200%  -100%; }
.s3x1 { background-position:  -300%  -100%; }

<div class="sprite s3x1" style="width: 45px; height:20px"></div>
<div class="sprite s3x1" style="width: 128px; height:30px"></div>
<div class="sprite s3x1" style="width: 64px; height:56px"></div>
<div class="sprite s2x1" style="width: 57px; height:60px"></div>
<div class="sprite s3x0" style="width: 45px; height:45px"></div>
<div class="sprite s0x1" style="width: 12px; height:100px"></div>


<br/>
<div class="sprite s0x0" style="width: 45px; height:20px"></div>
<div class="sprite s1x0" style="width: 128px; height:45px"></div>
<div class="sprite s2x0" style="width: 64px; height:56px"></div>
<div class="sprite s3x0" style="width: 57px; height:60px"></div>
<br/>
<div class="sprite s0x1" style="width: 45px; height:45px"></div>
<div class="sprite s1x1" style="width: 12px; height:50px"></div>
<div class="sprite s2x1" style="width: 12px; height:50px"></div>
<div class="sprite s3x1" style="width: 12px; height:50px"></div>

如果精灵的尺寸不同，你需要将每个精灵的 background-size设置为 a% ，这样精灵的宽度就会变成100%

换句话说，如果图像是640px 宽，图像中的精灵是45px 宽，那么得到的45px 是640px

xScale = imageWidth / spriteWidth
xScale = 640 / 45
xScale = 14.2222222222
xPercent = xScale * 100
xPercent = 1422.22222222%

然后你需要设置偏移量。偏移量的复杂性在于，0% 向左对齐，100% 向右对齐。

作为一个图形程序员，我希望100% 的偏移可以100% 地移动元素上的背景，换句话说，完全偏离了正确的一边，但这不是100% 的意思，当使用 backgrouhnd-position。background-position: 100%;表示右对齐。因此，在缩放之后考虑这个因素的公式是

xOffsetScale = 1 + 1 / (xScale - 1)
xOffset = offsetX * offsetScale / imageWidth

假设偏移量为31px

xOffsetScale = 1 + 1 / (14.222222222 - 1)
xOffsetScale = 1.0756302521021115
xOffset = offsetX * xOffsetScale / imageWidth
xOffset = 31 * 1.0756302521021115 / 640
xOffset = 0.05210084033619603
xOffsetPercent = 5.210084033619603

这是一张640x480的图片，有两个精灵。

31x27y 尺寸45w 32h
500x370y 尺寸105w 65h

按照上面的精灵1的算法

xScale = imageWidth / spriteWidth
xScale = 640 / 45
xScale = 14.2222222222
xPercent = xScale * 100
xPercent = 1422.22222222%


xOffsetScale = 1 + 1 / (14.222222222 - 1)
xOffsetScale = 1.0756302521021115
xOffset = offsetX * xOffsetScale / imageWidth
xOffset = 31 * 1.0756302521021115 / 640
xOffset = 0.05210084033619603
xOffsetPercent = 5.210084033619603


yScale = imageHeight / spriteHEight
yScale = 480 / 32
yScale = 15
yPercent = yScale * 100
yPercent = 1500%


yOffsetScale = 1 + 1 / (15 - 1)
yOffsetScale = 1.0714285714285714
yOffset = offsetY * yOffsetScale / imageHeight
yOffset = 27 * 1.0714285714285714 / 480
yOffset = 0.06026785714285714
yOffsetPercent = 6.026785714285714

div {
margin: 3px;
display: inline-block;
}
.sprite {
background-image: url('https://i.stack.imgur.com/mv9lJ.png');
}
.s1 {
background-size:      1422.2222% 1500%;
background-position:  5.210084033619603% 6.026785714285714%;
}
.s2 {
background-size:      609.5238095238095% 738.4615384615385%;
background-position:  93.45794392523367% 89.1566265060241%;
}

<div class="sprite s1" style="width: 45px; height:20px"></div>
<div class="sprite s1" style="width: 128px; height:30px"></div>
<div class="sprite s1" style="width: 64px; height:56px"></div>
<div class="sprite s1" style="width: 57px; height:60px"></div>
<div class="sprite s1" style="width: 45px; height:45px"></div>
<div class="sprite s1" style="width: 12px; height:50px"></div>
<div class="sprite s1" style="width: 50px; height:40px"></div>
<hr/>
<div class="sprite s2" style="width: 45px; height:20px"></div>
<div class="sprite s2" style="width: 128px; height:30px"></div>
<div class="sprite s2" style="width: 64px; height:56px"></div>
<div class="sprite s2" style="width: 57px; height:60px"></div>
<div class="sprite s2" style="width: 45px; height:45px"></div>
<div class="sprite s2" style="width: 12px; height:50px"></div>
<div class="sprite s2" style="width: 50px; height:40px"></div>

小开

使用带有所需值的 transform: scale(0.8);而不是0.8