與縮放

CSS3 spritesheet我產生一個CSS Spritesheet與紋理封隔器的幫助和它的外觀一樣與縮放

.pirateSlotSprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(../img/pirateSlotSprite.png);} 
.backgroundps {width:800px; height:480px; background-position: -105px -304px} 
.balanceBlockps {width:122px; height:61px; background-position: -0px -0px} 

...more classes for each frame... 

.lineControlps {width:113px; height:65px; background-position: -580px -0px} 
.maxBetButtonps {width:115px; height:64px; background-position: -348px -0px}

然後我申請的類pirateSlotSprite和backgroundps到一個div（SAV bgDiv）顯示背景框架從精靈表。一切都很好，直到這一點。

bgDiv將在瀏覽器調整大小時調整大小，但背景圖片保持靜態而不會縮小/放大以適合bgDiv。

所以我加background-size:100%到pirateSlotSprite，但是精靈被轉移到了不同的位置。我想整個圖像先縮小，然後background-position:-105px -304px得到應用，而不是縮放位置值。如果需要，我會分享照片以使問題更易於理解。

有關如何解決此問題的任何想法？

來源

2012-06-29 saiy2k

調整你的「背景位置」？ – henryaaron

多數民衆贊成我正在嘗試做的JS現在......但無法找到如何正確找到位置翻譯 – saiy2k

您誤解了背景圖片的工作方式。背景圖像的定位適用於像素或百分比。但圖像本身以真實分辨率和寬高比顯示（除非通過JavaScript進行更改）。因此，當您調整瀏覽器窗口大小時，它們不會「縮放/拉伸」。

來源

2012-06-29 08:11:03 Damien

將不會'background-size：100％'調整圖像的大小，因爲當它應用的div更改它時大小..我想它調整大小..我會發布示例代碼與圖像，使我的問題清除 – saiy2k

是的，但不與背景位置相關。不要誤會我的意思，理論上這是行得通的。但是我沒有看到你如何計算正確的定位和拉伸，而不會使圖像看起來不好/不正確定位。 – Damien

恰恰這是我卡住的地方。我不知道如何計算正確的定位！ – saiy2k

回答

相關問題