Marley Marley - 1 month ago 10
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

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.

Support:
CSS Zoom
Scale

Hope it helps you out.

Comments