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.
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:
// multiplies both coordinates and you will get your scaled image of 64 x 64.
or you can simply do
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.
Hope it helps you out.