与缩放

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

回答

相关问题