Redimensionner les images à partir d'un sprite
Est-il possible de redimensionner les images que nous recevons de sprite.
Je veux dire comme ceci:
background: url(../images/sprite.png) no-repeat -1px -1170px;
display: block;
height: 14px;
width: 14px;
Est-il possible de changer la largeur et la hauteur du sprite? Par exemple si j'ai icône en forme de crayon dans le sprite à la résolution 40x40 mais je veux afficher cette icône en forme de crayon comme 20x20 pixels
Je vous remercie, à l'avance.
source d'informationauteur Sergey
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser le
background-size
propriété css3:Une autre solution est d'utiliser le
zoom: .5;
propriété de css3.Après googler pour cette réponse, j'ai trouvé une solution ici: https://stackoverflow.com/a/10826761/2100636
Elle a travaillé en qui il a été sensible, même si elle n'est pas à l'aide d'une image d'arrière-plan pour le faire... il fonctionne dans tous les navigateurs plutôt que de les utiliser en arrière-plan, option de taille, où il ne serait pas travailler dans les vieux navigateurs de cette méthode.*
*eh bien au moins, quand je l'ai testé.
Vous pouvez voir la démo ici: http://tobyj.net/responsive-sprites/
J'ai employé cette dans la situation où j'ai un icône sur la gauche et le texte à droite, et il serait à l'échelle de mon icône vers le bas pour maintenir la réactivité.
Changer
background-size
fera de vous avoir à revaliderwidth
etheight
de conteneur à chaque fois.Lors de l'utilisation de
zoom
vous n'aurez pas de support pour firefox...
Une autre option est d'utiliser:
Le dos est l'élément après la mise à l'échelle sera toujours garder son espace d'origine.
background-size
est ce que vous cherchez.2018 solution:
Permet de dire que nous avons sprite de la grille de 5X4.
Première étape est fixé la taille de l'image d'arrière-plan par rapport à la continener
maintenant, nous avons sensible sprite.
suivante consiste à utiliser precente à la position de l'arrière-plan de sorte que notre figure vont se présenter. le calcul sont comme ça :
Maintenant dans chaque figure, nous devons définir, que la colonne et de la ligne de la position
afin de collaboration, nous avons :
Belle démo avec des cartes:https://repl.it/@perymimon/responsive-sprite
Onglet complet: https://responsive-sprite--perymimon.repl.co/