CSS sprite scale to div dimensions

Question

我想知道是否有方法將sprite圖像縮放到包含div的尺寸 例如，如果我有一個帶有10幀（每個100x100像素，使其爲1000x100）的精靈圖像 而包含div是例如寬度爲200px或50px，有沒有辦法讓框架在div內正確顯示？ 背景大小可以嗎？ 謝謝

Answer 1

您使用的是CSS3嗎？正因爲如此，你可以做以下

（HTML）

<div class='your-box'></div> 

（CSS）

.your-box { 
    background-image: url(.); 
    background-repeat: no-repeat; 
    background-size: contain; 
} 

你可以對其進行測試，在這裏，http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain（W3學校FTW）

而且我在我的書籤中有這個，http://caniuse.com/background-img-opts這讓我看看哪些瀏覽器適用。

如果你想它爲中心，你反芻添加到CSS

 position: absolute; 
     height: 100%; 
     width: 100%; 
     background-position: center; 

但正如我所說，這個工程的CSS3和仍然大多數人使用IE8（CSS是由IE9 +支持），但正如我之前所說，看看哪些瀏覽器可以再次與CSS3鏈接編譯（http://caniuse.com/background-img-opts）