How Can I Resize Images Within a CSS Sprite?

Scaling Images in CSS Sprites

In CSS sprites, cropping smaller images from a larger one is a common technique. But what if you want to resize the cropped portions? Here's how to scale images in a CSS sprite:

Background-size

If most of your browsers support background-size, you can use the following:

background-size : 150% 150%;

Zoom and Transform:scale

For cross-browser compatibility, consider using a combination of zoom and transform:scale:

[class^="icon-"]{
    zoom:0.5;
    -moz-transform:scale(0.5);
}

.icon-big{
    zoom:0.60;
    -moz-transform:scale(0.60);
}

.icon-small{
    zoom:0.29;
    -moz-transform:scale(0.29);
}

.Zoom:

• Supported by Webkit/Blink/IE
• Scales according to default zoom settings

Transform:scale:

• Supported by Mozilla, old Opera
• Scales independently of default zoom settings

Using this approach, you can easily shrink or enlarge your cropped images within the sprite. For example, to reduce the size of the icons next to "Item1, 2, 3, 4" in the example provided, simply increase the scale(). You can also adjust the zoom or scale values as needed.

The above is the detailed content of How Can I Resize Images Within a CSS Sprite?. For more information, please follow other related articles on the PHP Chinese website!