图标与响应大小像`背景大小：包含;'

我有一个应用程序，有很多的图标。我知道使用这些图标的精灵是正确的方式，而不是有多个小图像。然而，我需要这些图标是尺寸与容器（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％的宽度和高度？

来源

2017-09-06 Geoman Yabes

如果它是一个精灵，包含或覆盖将显示其中的许多，你需要专注于一个和背景大小到所需的比例来剪辑不需要的部分。张贴足够的代码和显示问题的精灵来获得有效的帮助。为你 –

可能重复的https://stackoverflow.com/questions/45595520/css-sprite-background-sizecover/45596000至少我给出的答案有点解释;） –

真棒..可能是它 –

没有什么神奇的解决方案来实现这个可悲的。您将不得不手动调整背景的大小。

#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那么你将有多个并发请求绝对零问题。

来源

2017-09-06 11:22:23

图标与响应大小像`背景大小：包含;'

回答

相关问题