圖標與響應大小像`背景大小：包含;'

我有一個應用程序，有很多的圖標。我知道使用這些圖標的精靈是正確的方式，而不是有多個小圖像。然而，我需要這些圖標是尺寸與容器（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

圖標與響應大小像`背景大小：包含;'

回答

相關問題