How Can I Scale a Cropped Image Within a CSS Sprite?

Scale a Cropped Image in a CSS Sprite

In the article "Create CSS Sprites to Enhance Your Page Performance," it explains how to crop a smaller image from a larger one. However, you may encounter a scenario where you need to scale the cropped image before incorporating it into your design. This can be achieved using various techniques.

Background-Size Method (IE9 , Modern Browsers)

Use the background-size property to specify the desired scaled size of the cropped image. For instance, if you want to double the image size, use the value 150% 150%.

background-size: 150% 150%;

Zoom and Transform Scaling

For cross-browser compatibility, combine zoom for WebKit/Blink/IE browsers with transform:scale for Mozilla and older Opera browsers.

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

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

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

This method allows you to scale specific cropped regions of the sprite without affecting other segments. You can adjust the zoom and scale values to achieve the desired sizes.

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