XF 1.4 How to scale css sprites (e.g. Smilies)

[Myke623]

I have a need for scaling (down) some smilies for alternate display purposes. Is there a tidy way to accomplish this?

 

[Jake Bunce]

Scaling becomes complicated when the image is in a sprite. Here is some good discussion though:

http://stackoverflow.com/questions/2430206/how-can-i-scale-an-image-in-a-css-sprite

It would be much cleaner and easier if you un-sprite the images or create a new sprite sheet with the smaller dimensions.

 

[Myke623]

Cheers Jake.

My preference would be to not create separate images or a sprite sheet for this purpose so I'll have a play around with the ideas suggested in the link.

 

[Myke623]

In case anyone has a need for this, following on from the suggestion of using zoom and transform-scale properties, I contain my smileys that I wish to scale down within a div and style it as so:

.smilieSmaller
{
    display: inline-block;
    zoom: 0.80;
    -moz-transform:scale(0.80);
    -moz-transform-origin: 0 0;
    -o-transform:scale(0.80);
    -o-transform-origin: 0 0;
}

The end result, as shown in Chrome, you can see the smaller (80%) version appearing in the tab, and the normal size below: