Resize image from sprite using CSS

Question

I have a CSS sprite with various icons in size 32x32px.

Now what I need is to display one of those icons in 20x20px size. I tried a few things, like setting the size to 20px, using background-size:cover, or using transform:scale(0.625) - but none of my attempts give the result I desire.

HTML for my tests:

32px icons:

<div class="sprite" style="background-position:0px 32px;">&nbsp;</div>
<div class="sprite" style="background-position:64px 32px;">&nbsp;</div>
<div class="sprite" style="background-position:32px 96px;">&nbsp;</div>
<div class="sprite" style="background-position:0px 0px;">&nbsp;</div>
<div class="sprite" style="background-position:32px 64px;">&nbsp;</div>

<hr>
20px icons (attempts):

<div class="sprite" style="background-position:32px 64px; width:20px; height:20px;">&nbsp;</div>
<div class="sprite" style="background-position:32px 64px; width:20px; height:20px; background-size:cover;">&nbsp;</div>
<div class="sprite" style="background-position:32px 64px; width:20px; height:20px; transform:scale(0.625);">&nbsp;</div>

CSS for my tests:

.sprite {
  background-image:url(http://buildnewgames.com/assets/article//dom-sprites/spritesheet.png);
  width:32px;
  height:32px;
}

Please have a look at this fiddle to see what I tried:

https://jsfiddle.net/dfqh0yrc/4/

Possible duplicate of [How can I scale an image in a CSS sprite](http://stackoverflow.com/questions/2430206/how-can-i-scale-an-image-in-a-css-sprite) — Punit, Dec 15 '16 at 07:02

Sebastian Brosch · Accepted Answer · 2016-12-15T07:24:24.737

4

You can only use the scale without width and height like the following:

.sprite {
  background:url(http://buildnewgames.com/assets/article//dom-sprites/spritesheet.png);
  width:32px;
  height:32px;
}

32px icons:
<div class="sprite" style="background-position:0px 32px;">&nbsp;</div>
<div class="sprite" style="background-position:64px 32px;">&nbsp;</div>
<div class="sprite" style="background-position:32px 96px;">&nbsp;</div>
<div class="sprite" style="background-position:0px 0px;">&nbsp;</div>
<div class="sprite" style="background-position:32px 64px;">&nbsp;</div>
<hr>
20px icons (attempts):
<div class="sprite" style="background-position:32px 64px; transform:scale(0.625);">&nbsp;</div>
<div class="sprite" style="background-position:32px 64px; transform:scale(calc(20 / 32));">&nbsp;</div>

You can also use calc to calculate the scale factor like the following:

<div class="sprite" style="background-position:32px 64px; transform:scale(calc(20 / 32));">&nbsp;</div>

Demo on JSFiddle: https://jsfiddle.net/dfqh0yrc/5/

edited Dec 15 '16 at 07:24

answered Dec 15 '16 at 07:02

Sebastian Brosch

42,106
15
72
87

This works great for resizing 32px to 20px! But I have a little issue when resizing from 24px to 20px which happens to be a scale of 0.8333333333333333. It looks like it is missing a pixel there, probably due to rounding, making it look misaligned with the rest of the layout. Is there a way to work around this missing pixel? – pimeys Dec 15 '16 at 07:20
can you provide a image url with the 24px sprite? try the calc method `calc(20 / 24)` – Sebastian Brosch Dec 15 '16 at 07:25
New fiddle here, with a 24px sprite. I tried to make green `.s20` divs around the image. If it was a 20px thing, it should be aligned perfectly in the middle, shouldn't it? https://jsfiddle.net/dfqh0yrc/6/ – pimeys Dec 15 '16 at 07:35
the scaled image is perfect but you are using `inline-block` and `
` so little gaps are creating the space – Sebastian Brosch Dec 15 '16 at 07:54
I actually just found out that CSS is messing up the element when scaling. For example I scaled down a 48px to 20px, and it stretched the outer div to a height and width of 48px, despite the actual image properly being 20px. Is there a way to keep it from stretching the outer div to the 'original' size? – pimeys Dec 15 '16 at 07:55
I somehow 'fixed' it, although it feels more like a workaround: I made the outer div `position:absolute`, then the overflow-width of the scaled object doesn't matter. I also had to set `transform-origin:0% 0%`. Thanks again for all your help :) – pimeys Dec 15 '16 at 08:03

score 0 · Answer 2 · answered Dec 15 '16 at 07:01

0

Try to use background-size in CSS.

example: background-size: 25% 25%;

Hope this solves your problem.

answered Dec 15 '16 at 07:01

Thamizhselvan

144
1
5

user984003 · Answer 3 · 2018-10-06T17:27:31.307

If you use percentage (instead of px) with background-size, then you can easily re-scale your images without having to recalculate the px X and Y.

SHEET:

This assumes a single row of sprites. The width of your sheet should be a number that is evenly divisible by 100 + width of one sprite. If you have 30 sprites that are 108x108 px, then add extra blank space to the end to make the final width 5508px (50*108 + 108).

CSS:

.icon{
    height: 30px;  /* Set this to anything. It will scale. */
    width: 30px; /* Match height. This assumes square sprites. */
    background:url(<mysheeturl>);
    background-size: 5100% 100%; /*  5100% because 51 sprites. */
}

/* Each image increases by 2% because we used 50+1 sprites. 
   If we had used 20+1 sprites then % increase would be 5%. */

.first_image{
    background-position: 0% 0;
}

.ninth_image{
    background-position: 16% 0; /* (9-1) x 2 = 16 */
}

HTML:

<div class ="icon first_image"></div>
<div class ="icon ninth_image"></div>

Resize image from sprite using CSS

3 Answers3