使用圖像精靈作爲CSS背景圖像的響應式網格

哇，這比我預期的要難！使用圖像精靈作爲CSS背景圖像的響應式網格

我們試圖在網格中的響應網站上使用圖像精靈作爲CSS背景圖像。

請check out our jsfiddle of the scenario。

所以基本上，當這個尺寸被調整時，精靈的背景圖像需要調整大小以適應父容器（<span>）。

我已經將背景圖像轉換爲data:image，認爲這將是第一步（儘管我不確定），現在還不能確定如何讓精靈的背景圖像響應。

到目前爲止我所嘗試過的一切都會在網格中的每個容器中顯示完整的精靈圖像。

來源

2014-12-09 zigojacko

您在流體設置中使用絕對像素值和背景大小。嘗試將背景位置轉換爲流體單位（如百分比）並添加背景大小以允許Spritesheet使用容器調整大小。

通過去除圖像容器的內高度和施加填充，可以使容器的高度比保持相同：通過計算而不是像素的子畫面的位置的百分比座標

.credits-grid li span.image { 
    background: url(../images/credits.png) no-repeat; 
    padding-top: 90%; 
    height: 0; 
    overflow: hidden; 
    background-size: 500% auto; 
}

然後值，你可以讓它自由地移動到位作爲容器的尺寸改變：

.credits-grid li span.image.c10 { 
    background-position: -26% 50%; 
}

你可以看到在行動此此琴在這裏：http://jsfiddle.net/nsvka987/2/

來源

2014-12-09 12:31:06 BurpmanJunior

Doh。當然。謝天謝地，這讓我們有足夠的力量繼續讓這些工作很好地工作。 +1 :) – zigojacko 2014-12-09 12:33:07

使用圖像精靈作爲CSS背景圖像的響應式網格

回答

相關問題