CODEWITHSUNDEEP
css
pimeys
pimeys

Reputation: 199

Resize image from sprite using CSS

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/

Upvotes: 5

Views: 3593

Answers (3)

user984003
user984003

Reputation: 29527

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>

Upvotes: 0

Sebastian Brosch
Sebastian Brosch

Reputation: 43574

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/

Upvotes: 4

Thamizhselvan
Thamizhselvan

Reputation: 144

Try to use background-size in CSS.

example: background-size: 25% 25%;

Hope this solves your problem.

Upvotes: 0

Related Questions