调整来自精灵图的图像大小

Question

我们从 sprite 获取的图像可否调整大小，我的意思是像这样:

background: url(../images/sprite.png) no-repeat -1px -1170px;
display: block;
height: 14px;
width: 14px;

从精灵图中更改宽度和高度是否可能？例如，如果我在精灵图中有一个尺寸为40x40像素的铅笔图标，但是我想将其显示为20x20像素。

提前感谢。

- Sergey

---

可能是重复的问题：如何在CSS sprite中缩放图像。 - Kris

Answer 1

另一种解决方案是使用css3的zoom: .5;属性。

- zmanc

---

嘭！像冠军一样工作。我只需要支持移动设备。 - Gamak

我希望我能给你更多的赞。这是一个老话题，但仍然非常有效。 - Alberto

抱歉，在Firefox中不支持。 - Tomasz Mularczyk

我认为 transform: scale(.5); /* 50% smaller */ 是更好的答案，因为它在任何地方都支持。 - Yash Vekaria

Answer 2

您可以在CSS3中使用background-size属性：

background-size: 50% 50%;

- Gregg B

---

由于精灵现在的大小减半，你的定位可能需要调整。 - Gregg B

将定位设置为百分比，然后就不需要再更改了。 - Jakob Jingleheimer

@jacob 使用百分比与zmanc的答案结合，让我达到了想要的效果！谢谢大家。 - MikeG

Answer 3

修改 background-size 将会导致您每次需要重新验证容器的 width 和 height。

使用 zoom 时，您将无法在 Firefox 上获得支持。

...

另一个选项是使用：

transform: scale(.5); /* 50% smaller */
transform: scale(1.5); /* 50% bigger */

缩放后，元素仍将保留其原始空间。

- Tomasz Mularczyk

Answer 4

在搜索了解答案后，我在这里找到了一个解决方案：https://dev59.com/C3E95IYBdhLWcg3wKqsk#10826761 它的确起作用，因为它是响应式的，尽管它没有使用背景图像... 但它在所有浏览器中都可以工作，而不是使用background-size选项，在旧浏览器中无法工作-这种方法可以。*

*至少在我测试时是这样。

您可以在此处查看演示：http://tobyj.net/responsive-sprites/ 我在左侧放置了一个图标并在右侧放置了文本，这使得我的图标会缩小以保持响应。

- amurrell

Answer 5

2018解决方案：

假设我们有一个5X4的网格精灵。

第一步是将背景图像的大小相对于容器固定。

.sprite{ background-size: 500% 400%; }

现在我们有响应式精灵。

接下来是使用百分比定位背景，这样只有我们的图像会显示出来。计算方法如下：

background-position: calc( var(--colum) * 100% / 5 - 1) calc(var(--row) * 100% / 4 - 1);

现在，在每个图形中，我们需要定义它位于哪一列和行。

.figure1{ --row:1, --column:0 }
.figure2{ --row:1, --column:1 }
// etc...

所以我们一起有：

.sprite{
     background-size: 500% 400%;
     background-position: calc( var(--colum) * 100% / 4) calc(var(--row) * 100% / 3); 
 }

.figure1{ --row:0, --column:0 }
.figure2{ --row:0, --column:1 }
.figure3{ --row:0, --column:2 }
.figure4{ --row:0, --column:3 }
.figure5{ --row:1, --column:0 }
// etc...

漂亮的卡片演示：https://repl.it/@perymimon/responsive-sprite

完整选项卡：https://responsive-sprite--perymimon.repl.co/

- pery mimon

---

不错，但是在你的示例中，你使用了一个CSS网格精灵：精灵内部的所有单个图像在尺寸上都是相等的。你的解决方案是否可以适应包含各种尺寸图像的精灵？ - user1561017

如果精灵布局在某个网格系统上，我假设您仍然可以使用该方法，只是跳过某些图块。主要的事情是你可以用百分比计算位置。 - pery mimon

Answer 6

使用 transform 只会改变图像的缩放而不是大小。为了将精灵图像的大小从 40px x 40px 更改为 20px x 20px，您需要将精灵图像的大小更改为 20px x 20px，然后调整背景大小以适应该区域中的图像精灵。此外，您还需要调整背景位置以显示正确的精灵部分。

#home {
    width: 46px;
    height: 44px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) 0 0;
}

#next {
    width: 43px;
    height: 44px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) -91px 0;
}


#resizedHome {
    width: 20px;
    height: 20px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) 0 0;
    background-size: 306%;
}

#resizedNext {
    width: 20px;
    height: 20px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) -102px 0;
    background-size: 306%;
}

<h5>
Original Sprite Image
</h5>
<img id="home" ><br><br>
<img id="next" >
<br><br>
<h5>
Resized Sprite Image
</h5>
<img id="resizedHome" ><br><br>
<img id="resizedNext" >

或者

https://jsfiddle.net/vivek11432/ep0m4yf6/

- Vivek Kumar

---

你如何根据要转换的大小（46px -> 20px）计算新的背景大小和新位置？ - andersuamar

Answer 7

background-size 是你要找的。

#example1 {
    background-size: 40px 40px;
}
#example2 {
    background-size: 20px 20px;
}

- Will

---

这很接近了，但精灵几乎肯定比他想要缩小的特定图标要大。如果他将整个背景缩小到20x20，那么他的图标将会太小。 - Gregg B