使用 CSS 从 sprite 调整图像大小答案

【问题标题】：Resize image from sprite using CSS使用 CSS 从 sprite 调整图像大小
【发布时间】：2016-12-15 06:56:21
【问题描述】：

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

现在我需要以 20x20px 大小显示其中一个图标。我尝试了一些方法，例如将大小设置为 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;
}

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

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

【问题讨论】：

How can I scale an image in a CSS sprite的可能重复

标签： css

【解决方案1】：

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

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

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

【讨论】：

这非常适合将 32px 调整为 20px！但是当我从 24px 调整到 20px 时我有一个小问题，恰好是 0.8333333333333333 的比例。看起来它在那里缺少一个像素，可能是由于四舍五入，使它看起来与布局的其余部分不对齐。有没有办法解决这个丢失的像素？
你能提供一个带有 24px 精灵的图片 url 吗？试试计算方法calc(20 / 24)
这里的新小提琴，带有 24 像素的精灵。我试图在图像周围制作绿色.s20 div。如果是 20px 的东西，它应该在中间完美对齐，不是吗？ jsfiddle.net/dfqh0yrc/6
缩放后的图像很完美，但您使用的是inline-block 和<br>，所以空间很小
我实际上刚刚发现 CSS 在缩放时弄乱了元素。例如，我将 48px 缩小到 20px，并将外部 div 拉伸到 48px 的高度和宽度，尽管实际图像正确为 20px。有没有办法阻止它将外部 div 拉伸到“原始”大小？

【解决方案2】：

尝试在 CSS 中使用 background-size。

示例：背景大小：25% 25%；

希望这能解决您的问题。

【讨论】：

【解决方案3】：

如果您在背景尺寸中使用百分比（而不是 px），那么您可以轻松地重新缩放图像，而无需重新计算 px X 和 Y。

表格：

这假设有单行精灵。工作表的宽度应该是一个能被 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>

【讨论】：