Comment puis-je mettre à l'échelle une image dans un sprite CSS

Dans cet article, http://css-tricks.com/css-sprites/ , il explique comment découper une image plus petite à partir d'une image plus grande. Pouvez-vous me dire si c'est possible / comment je peux rogner une image plus petite et ensuite mettre à l'échelle la zone rognée avant de la mettre en page?

Voici un exemple de cet article:

A
{
  background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/3deb155981/spriteme1.png);
  background-position: -10px -56px;
}

Je voudrais savoir comment puis-je mettre à l'échelle cette image après l'avoir recadrée à partir de spriteme1.png

Voici l'URL de l'exemple: http://css-tricks.com/examples/CSS-Sprites/Example1After/

Alors je voudrais savoir si je peux réduire les icônes à côté de Item1,2,3,4?

Vous pouvez utiliser background-size , car il est pris en charge par la plupart des navigateurs (mais pas tous http://caniuse.com/#search=background-size )

background-size : 150% 150%;

Ou

Vous pouvez utiliser une combinaison de zoom pour webkit / ie et de transformation: scale pour Firefox (-moz-) et Opera (-o-) pour les ordinateurs de bureau et mobiles multi-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-huge{
    zoom:1;
    -moz-transform:scale(1);
    -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;
}

Lorsque vous utilisez des sprites, vous êtes limité aux dimensions de l'image dans le sprite. La background-sizepropriété CSS, mentionnée par Stephen, n'est pas encore largement prise en charge et pourrait poser des problèmes avec les navigateurs comme IE8 et les versions antérieures - et étant donné leur part de marché, ce n'est pas une option viable.

Une autre façon de résoudre le problème consiste à utiliser deux éléments et à mettre à l'échelle le sprite en l'utilisant avec une imgbalise, comme ceci:

<div class="sprite-image"
     style="width:20px; height:20px; overflow:hidden; position:relative">
    <!-- set width/height proportionally, to scale the sprite image -->
    <img src="sprite.png" alt="icon"
         width="20" height="80"
         style="position:absolute; top: -20px; left: 0;" />
</div>

De cette façon, l'élément externe ( div.sprite-image) recadre une image 20x20px de la imgbalise, qui agit comme une mise à l'échelle background-image.

Essayez ceci: Stretchy Sprites - Cross-browser, redimensionnement / étirement réactif des images de sprite CSS

Cette méthode met à l'échelle les sprites de manière `` réactive '' afin que la largeur / hauteur s'ajuste en fonction de la taille de la fenêtre de votre navigateur. Il n'est pas utilisé background-size comme support pour cela dans les navigateurs plus anciens, c'est inexistant.

CSS

.stretchy {display:block; float:left; position:relative; overflow:hidden; max-width:160px;}
.stretchy .spacer {width: 100%; height: auto;}
.stretchy .sprite {position:absolute; top:0; left:0; max-width:none; max-height:100%;}
.stretchy .sprite.s2 {left:-100%;}
.stretchy .sprite.s3 {left:-200%;}

HTML

<a class="stretchy" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
<a class="stretchy s2" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
<a class="stretchy s3" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>

transform: scale(); fera que l'élément d'origine conserve sa taille.

J'ai trouvé que la meilleure option était d'utiliser vw. Cela fonctionne comme un charme:

https://jsfiddle.net/tomekmularczyk/6ebv9Lxw/1/

#div1,
#div2,
#div3 {
  background:url('//www.google.pl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png') no-repeat;
  background-size: 50vw;   
  border: 1px solid black;
  margin-bottom: 40px;
}

#div1 {
  background-position: 0 0;
  width: 12.5vw;
  height: 13vw;
}
#div2 {
  background-position: -13vw -4vw;
  width: 17.5vw;
  height: 9vw;
  transform: scale(1.8);
}
#div3 {
  background-position: -30.5vw 0;
  width: 19.5vw;
  height: 17vw;
}

<div id="div1">
  </div>
  <div id="div2">
  </div>
  <div id="div3">
  </div>

Voici ce que j'ai fait pour faire ça. Gardez à l'esprit que cela ne fonctionnera pas sur IE8 et les versions antérieures.

#element {
  width:100%;
  height:50px;
  background:url(/path/to/image.png);
  background-position:140.112201963534% 973.333333333333%;
}

La largeur de l'image d'arrière-plan sera réduite en tant que parent de l' #elementéchelle inférieure. Vous pouvez également faire de même avec sa hauteur si vous convertissez heighten pourcentage. Le seul point délicat est de déterminer les pourcentages background-position.

Le premier pourcentage correspond à la largeur de la zone ciblée de l'image-objet lorsqu'elle est à la largeur normale divisée par la largeur totale de l'image-objet et multipliée par 100.

Le deuxième pourcentage correspond à la hauteur de la zone ciblée de l'image-objet avant d'être mise à l'échelle divisée par la hauteur totale de l'image-objet et multipliée par 100.

Le libellé de ces deux équations est un peu bâclé, alors faites-moi savoir si vous avez besoin de moi pour mieux l'expliquer.

Cela semble fonctionner pour moi.

Si les sprites sont dans la grille, définissez le background-sizenombre de sprites sur 100% et le nombre de sprites vers le bas à 100%. Ensuite, utilisez background-position -<x*100>% -<y*100>%où x et y sont le sprite basé sur zéro

En d'autres termes, si vous voulez que le 3e sprite à partir de la gauche et la 2e rangée soit 2 au-dessus et 1 en bas, donc

background-position: -200% -100%;

Par exemple, voici une feuille de sprite sprites 4x2

Et voici un exemple

div {
  margin: 3px;
  display: inline-block;
}
.sprite {
  background-image: url('https://i.stack.imgur.com/AEYNC.png');
  background-size: 400% 200%;  /* 4x2 sprites so 400% 200% */
}
.s0x0 { background-position:    -0%   -0%; }
.s1x0 { background-position:  -100%   -0%; }
.s2x0 { background-position:  -200%   -0%; }
.s3x0 { background-position:  -300%   -0%; }
.s0x1 { background-position:    -0%  -100%; }
.s1x1 { background-position:  -100%  -100%; }
.s2x1 { background-position:  -200%  -100%; }
.s3x1 { background-position:  -300%  -100%; }

<div class="sprite s3x1" style="width: 45px; height:20px"></div>
<div class="sprite s3x1" style="width: 128px; height:30px"></div>
<div class="sprite s3x1" style="width: 64px; height:56px"></div>
<div class="sprite s2x1" style="width: 57px; height:60px"></div>
<div class="sprite s3x0" style="width: 45px; height:45px"></div>
<div class="sprite s0x1" style="width: 12px; height:100px"></div>

<br/>
<div class="sprite s0x0" style="width: 45px; height:20px"></div>
<div class="sprite s1x0" style="width: 128px; height:45px"></div>
<div class="sprite s2x0" style="width: 64px; height:56px"></div>
<div class="sprite s3x0" style="width: 57px; height:60px"></div>
<br/>
<div class="sprite s0x1" style="width: 45px; height:45px"></div>
<div class="sprite s1x1" style="width: 12px; height:50px"></div>
<div class="sprite s2x1" style="width: 12px; height:50px"></div>
<div class="sprite s3x1" style="width: 12px; height:50px"></div>

Si les sprites sont de tailles différentes, vous devez définir le background-sizepour chaque sprite sur un pour cent de sorte que la largeur de ce sprite devienne 100%

En d'autres termes, si l'image a une largeur de 640 pixels et que le sprite à l'intérieur de cette image a une largeur de 45 pixels, alors pour obtenir que 45 pixels soit 640 pixels

xScale = imageWidth / spriteWidth
xScale = 640 / 45
xScale = 14.2222222222
xPercent = xScale * 100
xPercent = 1422.22222222%

Ensuite, vous devez définir le décalage. La complication du décalage est que 0% est aligné à gauche et 100% est aligné à droite.

En tant que programmeur graphique, je m'attendrais à un décalage de 100% pour déplacer l'arrière-plan de 100% à travers l'élément, en d'autres termes entièrement du côté droit, mais ce n'est pas ce que 100% signifie lorsqu'il est utilisé backgrouhnd-position. background-position: 100%;signifie aligné à droite. Donc, le forum pour prendre cela en compte après la mise à l'échelle est

xOffsetScale = 1 + 1 / (xScale - 1)              
xOffset = offsetX * offsetScale / imageWidth

Supposons que le décalage est de 31 px

xOffsetScale = 1 + 1 / (14.222222222 - 1)
xOffsetScale = 1.0756302521021115
xOffset = offsetX * xOffsetScale / imageWidth
xOffset = 31 * 1.0756302521021115 / 640
xOffset = 0.05210084033619603
xOffsetPercent = 5.210084033619603

Voici une image 640x480 avec 2 sprites.

1. à 31x 27y taille 45w 32h
2. à 500x 370y taille 105w 65h

Suivre les maths ci-dessus pour le sprite 1

xScale = imageWidth / spriteWidth
xScale = 640 / 45
xScale = 14.2222222222
xPercent = xScale * 100
xPercent = 1422.22222222%

xOffsetScale = 1 + 1 / (14.222222222 - 1)
xOffsetScale = 1.0756302521021115
xOffset = offsetX * xOffsetScale / imageWidth
xOffset = 31 * 1.0756302521021115 / 640
xOffset = 0.05210084033619603
xOffsetPercent = 5.210084033619603

yScale = imageHeight / spriteHEight
yScale = 480 / 32
yScale = 15
yPercent = yScale * 100
yPercent = 1500%

yOffsetScale = 1 + 1 / (15 - 1)
yOffsetScale = 1.0714285714285714
yOffset = offsetY * yOffsetScale / imageHeight
yOffset = 27 * 1.0714285714285714 / 480
yOffset = 0.06026785714285714
yOffsetPercent = 6.026785714285714

div {
  margin: 3px;
  display: inline-block;
}
.sprite {
  background-image: url('https://i.stack.imgur.com/mv9lJ.png');
}
.s1 {
  background-size:      1422.2222% 1500%;
  background-position:  5.210084033619603% 6.026785714285714%;
}
.s2 {
  background-size:      609.5238095238095% 738.4615384615385%;
  background-position:  93.45794392523367% 89.1566265060241%;
}

<div class="sprite s1" style="width: 45px; height:20px"></div>
<div class="sprite s1" style="width: 128px; height:30px"></div>
<div class="sprite s1" style="width: 64px; height:56px"></div>
<div class="sprite s1" style="width: 57px; height:60px"></div>
<div class="sprite s1" style="width: 45px; height:45px"></div>
<div class="sprite s1" style="width: 12px; height:50px"></div>
<div class="sprite s1" style="width: 50px; height:40px"></div>
<hr/>
<div class="sprite s2" style="width: 45px; height:20px"></div>
<div class="sprite s2" style="width: 128px; height:30px"></div>
<div class="sprite s2" style="width: 64px; height:56px"></div>
<div class="sprite s2" style="width: 57px; height:60px"></div>
<div class="sprite s2" style="width: 45px; height:45px"></div>
<div class="sprite s2" style="width: 12px; height:50px"></div>
<div class="sprite s2" style="width: 50px; height:40px"></div>

Ancien post, mais voici ce que j'ai fait en utilisant background-size:cover;(pointe du chapeau à @Ceylan Pamir) ...

EXEMPLE D'UTILISATION
Flipper de cercle horizontal (survolez l'image du recto, bascule vers l'arrière avec une image différente).

EXEMPLE SPRITE
480px x 240px

EXEMPLE TAILLE FINALE
Image unique @ 120px x 120px

CODE GÉNÉRIQUE
.front {width:120px; height:120px; background:url(http://www.example.com/images/image_240x240.png); background-size:cover; background-repeat:no-repeat; background-position:0px 0px;}

.back {width:120px; height:120px; background:url(http://www.example.com/images/image_240x240.png); background-size:cover; background-repeat:no-repeat; background-position:-120px 0px;}

CAS ABRÉVIÉ FIDDLE
http://jsfiddle.net/zuhloobie/133esq63/2/

essayez d'utiliser la taille de l'arrière-plan: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

y a-t-il quelque chose qui vous empêche de rendre les images à la taille que vous voulez en premier lieu?

Il m'a fallu un certain temps pour créer une solution à ce problème dont j'étais satisfait:

Problème:

• Un sprite SVG d'icônes - disons 80px x 3200px

• Nous voulons mettre à l'échelle chaque utilisation d'entre eux dans les sélecteurs de contenu (: avant /: après) à divers endroits sur différentes tailles sans redéfinir les coordonnées de chaque sprite en fonction de la taille utilisée.

Donc, cette solution vous permet d'utiliser les mêmes coordonnées de sprite dans un <button>comme un <menuitem>tout en le redimensionnant.

[data-command]::before {
    content: '';
    position: absolute;
    background-image: url("images/sprite.svgz");
    background-repeat: no-repeat;
    background-size: cover;
}

button[data-command]::before {
  width: 32px;
  height: 32px;
}

menuitem[data-command]::before {
  width: 24px;
  height: 24px;
}

[data-command="cancel"]::before {
  background-position: 0% 35%;
}

[data-command="logoff"]::before {
  background-position: 0% 37.5%;
}

En utilisant des pourcentages (à 2 décimales) dans la position de l'arrière-plan plutôt que la taille de l'arrière-plan comme suggéré par d'autres ici, vous pouvez mettre à l'échelle la même déclaration d'icône à n'importe quelle taille, sans avoir besoin de la redéclarer.

Le pourcentage de position-y est la hauteur d'origine du sprite / hauteur de l'icône en% - dans notre cas ici 80px * 100 / 3200px == chaque sprite est représenté par une position y de 2,5%.

Si vous avez des états de survol / survol de la souris, vous pouvez doubler la largeur du sprite et spécifier dans la coordonnée position-x.

L'inconvénient de cette approche est que l'ajout d'icônes à une date ultérieure modifiera la hauteur du sprite et donc la position y%, mais si vous ne le faites pas, vos coordonnées de sprite devront être modifiées pour chaque résolution mise à l'échelle dont vous avez besoin.

Eh bien, je pense que j'ai trouvé une solution plus simple pour la mise à l'échelle des images: exemple - disons qu'il y a une image avec 3 sprites de taille égale que vous voudriez utiliser, utilisez CSS pour redimensionner l'image

background-size : 300% 100%;

puis spécifiez la hauteur et la largeur personnalisées qui doivent être appliquées à votre élément html, par exemple:

 width :45%;
 height:100px;

Un exemple de code ressemblerait à ceci:

.customclass {
    background: url("/sample/whatever.png") 0 0 no-repeat ;
    background-size : 300% 100%;
    width :45%;
    height:100px;
}

Je suis assez nouveau en css, et le style n'est pas mon meilleur domaine, cela pourrait être une mauvaise façon de le faire .. mais cela a fonctionné pour moi dans Firefox / Chrome / Explorer 10, j'espère que cela fonctionne aussi dans les anciennes versions ..

Utilisez transform: scale(...);et ajoutez une correspondance margin: -...pxpour compenser l'espace libre de la mise à l'échelle. (vous pouvez utiliser * {outline: 1px solid}pour voir les limites des éléments).

2018 ici. Utilisez background-size avec pourcentage.

FEUILLE:

Cela suppose une seule ligne de sprites. La largeur de votre feuille doit être un nombre divisible par 100 + la largeur d'un sprite . Si vous avez 30 sprites de 108 x 108 pixels, ajoutez un espace vide supplémentaire à la fin pour obtenir la largeur finale de 5508 pixels (50 * 108 + 108).

CSS:

.icon{
    height: 30px;  /* Set this to anything. It will scale. */
    width: 30px; /* Match height. This assumes square sprites. */
    background:url(<mysheeturl>);
    background-size: 5100% 100%; /*  5100% because 51 sprites. */
}

/* Each image increases by 2% because we used 50+1 sprites. 
   If we had used 20+1 sprites then % increase would be 5%. */

.first_image{
    background-position: 0% 0;
}

.ninth_image{
    background-position: 16% 0; /* (9-1) x 2 = 16 */
}

HTML:

<div class ="icon first_image"></div>
<div class ="icon ninth_image"></div>

Utilisez transform: scale(0.8);avec la valeur dont vous avez besoin au lieu de 0,8

Définissez la largeur et la hauteur de l'élément wrapper de l'image de sprite. Utilisez ce css.

{
    background-size: cover;
}

Facile ... Utiliser deux copies de la même image avec une échelle différente sur la feuille du sprite. Définissez les coordonnées et la taille sur la logique de l'application.