css3 spritesheet缩放 [英] css3 spritesheet with scaling

问题描述

我在Texture Packer的帮助下生成了一个CSS Spritesheet，它看起来像

I generated a CSS Spritesheet with the help of a Texture packer and its looks like

.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 bgDiv ）的 和和 backgroundps 片。

Then I apply the classes pirateSlotSprite and backgroundps to a div (sav bgDiv) to display the background frame from the sprite sheet. Everything is fine upto this point.

bgDiv 会在浏览器调整大小时调整大小，

bgDiv will get resized when the browser gets resized, but the background picture remained static without getting shrinked/enlarged to fit bgDiv.

所以我添加了 background-size：100％到 pirateSlotSprite ，但是sprite被移动到不同的位置。我想首先收缩整个图像，然后应用 background-position：-105px -304px ，而没有位置值被缩放。

So I added background-size:100% to pirateSlotSprite, but the sprite gets shifted to a different position. I guess the whole image gets shrinked first and then background-position:-105px -304px gets applied without the position values being scaled. If needed I will share the pictures to make the problem easier to understand.

有关如何解决这个问题的任何想法？

Any ideas on how to fix this?

推荐答案

你误会背景图片的工作方式。背景图像的定位使用像素或百分比。但图像本身以真实的分辨率和纵横比显示（除非被JavaScript改变）。因此，当您调整浏览器窗口大小时，它们不会缩放/拉伸。

You misunderstand the way background images work. Positioning for background-images work with either pixels or percentages. But the images themselves are displayed in their true resolution and aspect ratio (unless altered by JavaScript). So they won't 'scale/stretch' when you resize the browser window.

这篇关于css3 spritesheet缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！