具有响应大小的图标的精灵，如`background-size: contain;`

Question

我有一个有很多图标的应用程序。我知道为这些图标使用 sprite 是正确的方法，而不是使用多个小图像。但是，我需要这些图标与容器大小相同 (background-size: contain;)，所以我不得不为每个图标使用多个图像：

.icon1 {
  background-image: url('../my-site/icon1.gif');
  background-size: contain;
}

.icon2 {
  background-image: url('../my-site/icon2.gif');
  background-size: contain;
}
. . . and so on...

然而，使用精灵会导致：

(without background-size: contain;) - 当按钮很大时图像很小
(using background-size: contain;) - 整个精灵显示给容器！

有没有一种方法可以使用响应式 sprite 来显示图标（使用 background-position）并使该图标成为容器的 100% 宽度和高度？

Answer 1

遗憾的是，没有神奇的解决方案可以实现这一目标。您将不得不手动调整背景本身的大小。

#home {
    width: 46px;
    height: 44px;
    background: url(https://i.imgur.com/1ijjJJU.gif) 0 0;
}

#next {
    width: 43px;
    height: 44px;
    background: url(https://i.imgur.com/1ijjJJU.gif) -91px 0;
}

#home-double {
    width: 92px;
    height: 88px;
    background: url(https://i.imgur.com/1ijjJJU.gif) 0 0;
    background-size: 268px;
}

#next-double {
    width: 86px;
    height: 88px;
    background: url(https://i.imgur.com/1ijjJJU.gif) -182px 0;
    background-size: 268px;
}

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

<p>Normal size</p>
<p><img id="home" src="img_trans.gif"></p>
<p><img id="next" src="img_trans.gif"></p>

<p>Double size</p>
<p><img id="home-double" src="img_trans.gif"></p>
<p><img id="next-double" src="img_trans.gif"></p>

</body>
</html>

请注意，在更改背景大小的同时，您还必须更改背景位置。

当然是疯了，没有意义。

我最近停止使用精灵，转而使用 SVG 精灵。它们令人难以置信且更加灵活，可以让您做更多的事情。你可以改变它们的颜色和大小，在视网膜屏幕上玩得很好。

如果您仍然喜欢 PNG 图标，我会说放弃 sprite。即使有适当的构建过程，维护它们也很困难。选择 https 和 http2，那么多个并发请求的问题绝对为零。

具有响应大小的图标的精灵，如`background-size: contain;`

sprites for icons with responsive size like `background-size: contain;`

html

css

css-sprites

responsive-images