Comment puis-je redimensionner des images dans un sprite CSS ?

Mise à l'échelle des images dans les sprites CSS

Dans les sprites CSS, recadrer des images plus petites à partir d'une plus grande est une technique courante. Mais que se passe-t-il si vous souhaitez redimensionner les parties recadrées ? Voici comment redimensionner les images dans un sprite CSS :

Taille de l'arrière-plan

Si la plupart de vos navigateurs prennent en charge la taille de l'arrière-plan, vous pouvez utiliser ce qui suit :

background-size : 150% 150%;

Zoom et Transformation : échelle

Pour une compatibilité entre navigateurs, envisagez d'utiliser une combinaison de zoom et 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 :

• Supporté par Webkit/Blink/IE
• Échelles en fonction du zoom par défaut paramètres

Transform:scale:

• Supporté par Mozilla, ancien Opera
• Mise à l'échelle indépendamment des paramètres de zoom par défaut

En utilisant cette approche, vous pouvez facilement réduire ou agrandir vos images recadrées dans le sprite. Par exemple, pour réduire la taille des icônes à côté de "Item1, 2, 3, 4" dans l'exemple fourni, augmentez simplement la valeur scale(). Vous pouvez également ajuster les valeurs de zoom ou d'échelle selon vos besoins.

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!