Question

我有一个带有各种图标的CSS精灵，大小为32x32px。

现在我需要的是以20x20px大小显示其中一个图标。我尝试了一些东西，比如将大小设置为20px，使用background-size：cover，或者使用transform：scale（0.625） - 但是我没有尝试给出我想要的结果。

我测试的HTML：

32px icons:

<div class="sprite" style="background-position:0px 32px;">&nbsp;</div>
<div class="sprite" style="background-position:64px 32px;">&nbsp;</div>
<div class="sprite" style="background-position:32px 96px;">&nbsp;</div>
<div class="sprite" style="background-position:0px 0px;">&nbsp;</div>
<div class="sprite" style="background-position:32px 64px;">&nbsp;</div>

<hr>
20px icons (attempts):

<div class="sprite" style="background-position:32px 64px; width:20px; height:20px;">&nbsp;</div>
<div class="sprite" style="background-position:32px 64px; width:20px; height:20px; background-size:cover;">&nbsp;</div>
<div class="sprite" style="background-position:32px 64px; width:20px; height:20px; transform:scale(0.625);">&nbsp;</div>

我测试的CSS：

.sprite {
  background-image:url(http://buildnewgames.com/assets/article//dom-sprites/spritesheet.png);
  width:32px;
  height:32px;
}

请看看这个小提琴，看看我尝试了什么：

https://jsfiddle.net/dfqh0yrc/4/

Answer 1

您只能使用scale width和height，如下所示：

＆＃13;

.sprite {
  background:url(http://buildnewgames.com/assets/article//dom-sprites/spritesheet.png);
  width:32px;
  height:32px;
}

＆＃13;

32px icons:
<div class="sprite" style="background-position:0px 32px;">&nbsp;</div>
<div class="sprite" style="background-position:64px 32px;">&nbsp;</div>
<div class="sprite" style="background-position:32px 96px;">&nbsp;</div>
<div class="sprite" style="background-position:0px 0px;">&nbsp;</div>
<div class="sprite" style="background-position:32px 64px;">&nbsp;</div>
<hr>
20px icons (attempts):
<div class="sprite" style="background-position:32px 64px; transform:scale(0.625);">&nbsp;</div>
<div class="sprite" style="background-position:32px 64px; transform:scale(calc(20 / 32));">&nbsp;</div>

＆＃13;

您还可以使用calc来计算比例因子，如下所示：

<div class="sprite" style="background-position:32px 64px; transform:scale(calc(20 / 32));">&nbsp;</div>

演示JSFiddle： https://jsfiddle.net/dfqh0yrc/5/

Answer 2

尝试在CSS中使用 background-size 。

示例：background-size：25％25％;

希望这能解决你的问题。

Answer 3

如果使用背景大小的百分比（而不是px），则可以轻松地重新缩放图像，而无需重新计算px X和Y。

表格：

这假设是一排精灵。工作表的宽度应为数字，该数字可被100 +一个小精灵的宽度均匀除以。如果您有30个大小为108x108像素的精灵，请在末尾添加额外的空白以使最终宽度为5508px（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>

使用CSS调整sprite的图像大小

3 个答案: