Comment redimensionner les images dans un sprite CSS ?

Comment redimensionner une image dans un sprite CSS

Dans le contexte des sprites CSS, où des images plus petites sont recadrées à partir d'une image plus grande pour Pour un affichage efficace, il est souvent nécessaire de redimensionner les zones recadrées. Cet article propose une solution à ce défi.

Vous pouvez réaliser la mise à l'échelle de l'image dans un sprite CSS en utilisant diverses méthodes.

Utilisation de background-size (recommandé) :

background-size: 150% 150%;

background-size est largement pris en charge par la plupart des navigateurs modernes. Il vous permet de redimensionner l'image horizontalement et verticalement.

Utilisation du zoom et de transform:scale pour la prise en charge de plusieurs navigateurs :

[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;
}

Cette approche utilise le zoom pour Navigateurs Webkit/Blink/IE et transform:scale pour les navigateurs Mozilla(-moz-) et anciens Opera(-o-) pour obtenir des résultats multi-navigateurs compatibilité.

Remarque : Il est important de prendre en compte la prise en charge du navigateur lors de la mise en œuvre de la solution. Vérifiez toujours la compatibilité du navigateur avant d'utiliser ces techniques en production.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!