具有响应大小的图标的精灵，例如“背景大小：包含；”答案

【问题标题】：sprites for icons with responsive size like `background-size: contain;`具有响应大小的图标的精灵，例如“背景大小：包含；”
【发布时间】：2017-09-06 11:07:34
【问题描述】：

我有一个有很多图标的应用。我知道为这些图标使用精灵是正确的方法，而不是使用多个小图像。但是，我需要这些图标与容器 (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...

然而，使用精灵会导致：

（没有background-size: contain;） - 当按钮很大时，图像太小了
（使用background-size: contain;） - 整个精灵都显示在容器中！

有没有办法使用响应式精灵来显示图标（使用background-position）并使该图标具有容器的 100% 宽度和高度？

【问题讨论】：

如果它是一个精灵，包含或封面会显示其中的许多，你需要专注于一个和背景大小到所需的比例来剪切不需要的部分。发布足够多的代码和显示问题的精灵，以获得有效的帮助。谢谢你
stackoverflow.com/questions/45595520/… 的可能重复项至少我给出的答案解释了一点；）
太棒了..可能是它
CSS Sprite + background-size:cover的可能重复

标签： html css css-sprites responsive-images

【解决方案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 图标，我会说放弃精灵。即使使用适当的构建过程，维护它们也很困难。去 https 和 http2 那么你将有多个并发请求绝对零问题。

【讨论】：