使用CSS调整精灵图中的图片大小

Question

我有一个大小为32x32像素的CSS精灵，其中包含各种图标。

现在我需要将其中一个图标以20x20像素的大小显示出来。我尝试了一些方法，比如将大小设置为20像素，使用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;
}

请查看这个fiddle，了解我尝试过的内容：

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

- pimeys

---

可能是如何在CSS精灵中缩放图像的重复问题。 - Punit

Answer 1

只有像下面这样没有使用width和height时，才能使用scale：

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

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>

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

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

Demo on JSFiddle: https://jsfiddle.net/dfqh0yrc/5/ （在JSFiddle上的演示）

- Sebastian Brosch

---

这对于将32px调整为20px非常有效！但是，当我从24px调整到20px时，会出现一个小问题，这恰好是0.8333333333333333的比例。看起来似乎缺少了一个像素，可能是由于四舍五入导致的，使其与布局的其他部分不对齐。有没有办法解决这个缺失的像素问题？ - pimeys

你能提供一个带有24像素精灵的图像URL吗？尝试使用calc方法calc(20 / 24)。 - Sebastian Brosch

这里有一个新的小提琴，带有24像素的精灵。我试图在图像周围制作绿色的.s20 div。如果它是一个20像素的东西，它应该完美地对齐在中间，不是吗？https://jsfiddle.net/dfqh0yrc/6/ - pimeys

缩放后的图像非常完美，但是您正在使用“inline-block”和“<br>”，因此会创建一些小间隙。 - Sebastian Brosch

我刚刚发现CSS在缩放元素时会出现问题。例如，我将48px的图像缩小到20px，它会将外部div拉伸到48px的高度和宽度，尽管实际图像大小为20px。有没有办法防止它将外部div拉伸到“原始”大小？ - pimeys

我以某种方式“修复”了它，尽管感觉更像是一种解决方法：我将外部div设置为position:absolute，然后缩放对象的溢出宽度就不重要了。我还必须设置transform-origin:0% 0%。再次感谢您的所有帮助 :) - pimeys

Answer 2

尝试在CSS中使用background-size。

例如：background-size: 25% 25%;

希望这能解决您的问题。

- Thamizhselvan

Answer 3

如果您使用百分比（而不是px）与background-size一起使用，则可以轻松重新缩放图像，而无需重新计算px X和Y。

表格：

这假定有一个单行的精灵。您的表格宽度应该是可被100整除的数字+一个精灵的宽度。如果您有30个大小为108x108 px的精灵，则在末尾添加额外的空白空间，使最终宽度为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>

- user984003