css3 spritesheet with scaling

问题:

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}

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 will get resized when the browser gets resized, but the background picture remained static without getting shrinked/enlarged to fit bgDiv.

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?

回答1:

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.