Marley Marley - 1 year ago 52
CSS Question

How to scale the image size in a sprite

I have a sprite with all 32 x 32 images and I am using them in my project but in some places, I want the image to be 64 x 50 instead of 32 x 32. Now, how can I do that using CSS. Is there any way to do it?

Any help would be appreciated. Thanks.

Answer Source

You can actually use transform: scale() property to scale your image inside the sprite or you can use the new zoom property of css.

For example: If you have the image 32 x 32 and want to scale it to lets say 64 x 64. Simple multiply by 2 should do the trick. So, you would use something as follows:

transform: scale(2.0); // multiplies both coordinates and you will get your scaled image of 64 x 64.

or you can simply do zoom: 2;

Now, in your case as you want to x axis in different way and y axis in different way implying x as width and y as height. You could do as following:

transform: scaleX(2.0);
transform: scaleY(1.5625);

That should do the trick :)

And one more thing, the zoom property is not yet supported by Firefox which is really weird but scale is supported by all the browsers.

CSS Zoom

Hope it helps you out.