I am resizing icons on a sprite sheet by scaling the image with CSS. In Chrome it works fine. Firefox scales the graphic correctly but it takes up the same space as the unscaled version.
I found -moz-focus-inner which removed some padding but doesn't appear to be related.
I've tried reducing the size of the image in CSS, but it crops then scales instead of scaling then cropping, and it breaks Chrome's version. This is it in Firefox :(
I don't want to add more tags to fix it, e.g. I could wrap the <i> with a <span> and set the span's CSS to width:x and height:x and overflow:hidden.
I'm looking for a CSS solution to fix this, so without creating another sprite sheet, without changing the HTML and without JS, if there is one.
<button class="btn"><i class="icon"></i></button>
<button class="btn"><i class="icon icon-small"></i></button>
CSS
.btn, .btn-small{
border:0;
background:#000;
padding:5px;
margin:5px;
}
.icon{
width:50px;
height:50px;
background-image:url(https://ssl.gstatic.com/gb/images/v1_53a1fa6a.png);
background-position: -145px -75px;
background-repeat:no-repeat;
display:inline-block;
}
.icon-small{
zoom:0.5;
-moz-transform:scale(0.5);
-moz-transform-origin: 0 0;
}