How to Scale Images Within a CSS Sprite?

How to Scale an Image in a CSS Sprite

In the context of CSS sprites, where smaller images are cropped from a larger image for efficient display, there's often a need to scale the cropped regions. This article provides a solution to this challenge.

You can achieve image scaling in a CSS sprite using various methods.

Using background-size (Recommended):

background-size: 150% 150%;

background-size is widely supported by most modern browsers. It allows you to scale the image both horizontally and vertically.

Using zoom and transform:scale for Cross-Browser Support:

[class^="icon-"] {
  display: inline-block;
  background: url('../img/icons/icons.png') no-repeat;
  width: 64px;
  height: 51px;
  overflow: hidden;
  zoom: 0.5;
  -moz-transform: scale(0.5);
  -moz-transform-origin: 0 0;
}

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

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

This approach uses zoom for Webkit/Blink/IE browsers and transform:scale for Mozilla(-moz-) and old Opera(-o-) browsers to achieve cross-browser compatibility.

Note: It's important to consider browser support when implementing the solution. Always check for browser compatibility before using these techniques in production.

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