我剛剛在另一個問題中接到了幫助，我最近在這裏問到精靈問題，但現在我讓他們正常工作，我遇到了另一個問題：如何縮放顯示的圖像？使用百分比縮放圖像精靈：可能嗎？
我當前的代碼如下：
<div class="index1"></div>
和CSS：
img.index1 {
margin:auto;
width:258px;
height:300px;
background:url("../Images/index.png") 0px 0px;
}
這是原樣的作品，在絕對尺寸顯示來自精靈的相應圖像的基本代碼258 * 300像素。問題是，我也想設置寬度爲40％。這裏是我的嘗試：
.index1 {
margin:auto;
width:40%;
max-width:258px;
height:300px;
background:url("../Images/index.png") 0px 0px;
}
如果我使用普通圖像（即，不是精靈），我會簡單地將寬度設置爲40％，並且圖像很好地擴展到包含div。這是一個比例，所以高度也會降低，而不會出現任何失真或圖像中斷。使用上面的CSS，圖像是未縮放的，並且因爲寬度降低了，所以邊被切掉。
這裏的目的是讓寬度根據不同的瀏覽器寬度進行相應的調整，簡而言之，我想複製圖像行爲，就像使用設置了百分比寬度的簡單圖像一樣。我迄今爲止失敗了。不，我無法解決縮放問題。
編輯：我還應該提到，調整瀏覽器寬度僅調整圖像的多少被切斷。
解決方案：
首先，如果你有相同尺寸的多個圖像（也許是相同的比例，但我沒有測試），這僅適用。因此，我會盡我所能地嘗試解釋解決方案，並藉助一個假設性示例：
首先，您需要一個佔位符圖像。此圖像必須與您要顯示的圖像具有相同的尺寸或比例。不管圖像內容是什麼，但我用透明的圖像。
現在，假設您想要在精靈中有5張圖片，它們會顯示在您的主頁上。讓我們把這些圖像index1.png，指數2.png等下面是HTML顯示它：
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite1" src="Images/index.png" />
</div>
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite2" src="Images/index.png" />
</div>
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite3" src="Images/index.png" />
</div>
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite4" src="Images/index.png" />
</div>
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite5" src="Images/index.png" />
</div>
你會發現有一個div內的兩個圖像。我馬上就會了解div class的意義。 trans類顯示透明圖像，「sprite sprite5」類顯示實際圖像。我爲這個圖像分配了兩個類，只是爲了讓我的CSS中的行數最少，並且使全局圖像變化更簡單。您還會注意到，五個div的內容之間的差異僅僅是第二個圖像從sprite1改爲5的第二個類名。我還會稍後解釋這一點。
現在的CSS：
.stretch15 {
width:15%;
max-width:258px;
overflow:hidden;
position:relative;
margin:0px auto;
display:block;
}
.trans {
width:100%;
height:auto;
display:block;
margin:0;
padding:0;
}
.sprite {
position:absolute;
top:0;
max-width:none;
max-height:100%;
display:block;
}
.sprite1 {
left:0;
}
.sprite2 {
left:-100%;
}
.sprite3 {
left:-200%;
}
.sprite4 {
left:-300%;
}
.sprite5 {
left:-400%
}
我使用的類名 'stretch15' 來顯示div的寬度。我使用多個div寬度，因此，我使用了一些任意名稱'stretch'，然後使用一個數字來告訴我寬度是多少。所以stretch15告訴我這個div會有15％的寬度，就像在CSS中看到的那樣。通過改變這個div的CSS的寬度，你基本上覆制了（我知道它不是有效的代碼，但它是顯示它的最簡單的方法）的函數。
至於sprite1到5，它們都在sprite類中共享相同的樣式，所以剩下的只是給我確定哪個「左」位置開始顯示圖像。這就是爲什麼圖像必須全部大小相同。如果您向左移動-100％（或向右移動100％），則應該放在第二張圖像的左側。還剩下-200％讓您看到第三張圖片，依此類推。
至於其餘的東西，我老實說不太清楚爲什麼他們在那裏，除了他們工作的事實。我所做的是通過here查看源代碼。另外，如果你有類似Firebug（Firefox擴展）的東西，它確實會有所幫助，你可以在這裏禁用樣式來查看事情如何受到影響。它會幫助你理解很多。
一些反饋的答案會很好 –
@GCyrillus：對不起。我工作了兩份工作，很難及時回覆。希望我會盡快解決。 – Hiigaran
oki，bon courage –