Como posso dimensionar uma imagem em um sprite CSS

Neste artigo, http://css-tricks.com/css-sprites/ , ele fala sobre como cortar uma imagem menor de uma imagem maior. Você pode me dizer se é possível / como posso cortar uma imagem menor e depois escalar a região cortada antes de colocá-la em destaque?

Aqui está um exemplo desse artigo:

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

Gostaria de saber como posso dimensionar essa imagem depois de cortá-la do spriteme1.png

Aqui está o URL do exemplo: http://css-tricks.com/examples/CSS-Sprites/Example1After/

Então, eu gostaria de saber se posso diminuir os ícones ao lado do Item1,2,3,4?

Você pode usar o tamanho do plano de fundo , como suportado pela maioria dos navegadores (mas nem todos http://caniuse.com/#search=background-size )

background-size : 150% 150%;

Ou

Você pode usar uma combinação de zoom para webkit / ie transform: scale para Firefox (-moz-) e Opera (-o-) para desktop e celular entre navegadores

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

Ao usar sprites, você fica limitado às dimensões da imagem no sprite. A background-sizepropriedade CSS, mencionada por Stephen, ainda não é amplamente suportada e pode causar problemas em navegadores como o IE8 e abaixo - e, dada a sua participação no mercado, essa não é uma opção viável.

Outra maneira de resolver o problema é usar dois elementos e escalar o sprite usando-o com uma imgtag, assim:

<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>

Dessa forma, o elemento externo ( div.sprite-image) está cortando uma imagem de 20x20px da imgtag, que age como uma escala background-image.

Experimente: Stretchy Sprites - Redimensionamento / alongamento responsivo em vários navegadores de imagens de sprites CSS

Esse método dimensiona os sprites 'responsivamente' para que a largura / altura se ajuste de acordo com o tamanho da janela do navegador. Ele não usa, background-size pois o suporte a isso em navegadores antigos é inexistente.

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(); fará com que o elemento original preserve seu tamanho.

Eu achei a melhor opção é usar vw. Está funcionando como um encanto:

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>

Aqui está o que eu fiz para fazer isso. Lembre-se de que não funcionará no IE8 e abaixo.

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

A largura da imagem de fundo será reduzida conforme o pai das #elementescalas. Você também pode fazer o mesmo com sua altura, se converter heightpara uma porcentagem. A única parte complicada é descobrir as porcentagens para background-position.

A primeira porcentagem é a largura da área de destino do sprite quando na largura normal dividida pela largura total do sprite e multiplicada por 100.

A segunda porcentagem é a altura da área de destino do sprite antes de ser escalada, dividida pela altura total do sprite e multiplicada por 100.

A redação dessas duas equações é um pouco superficial, então, deixe-me saber se você precisa de uma explicação melhor.

Isso parece funcionar para mim.

Se os sprites estiverem na grade, defina o background-sizenúmero de 100% de sprites e o número de 100% de sprites para baixo. Em seguida, use background-position -<x*100>% -<y*100>%onde x e y são o sprite baseado em zero

Em outras palavras, se você quiser o terceiro sprite da esquerda e da segunda linha, são 2 sobre e 1 para baixo,

background-position: -200% -100%;

Por exemplo, aqui está uma folha de sprite 4x2 sprites

E aqui está um exemplo

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>

Se os sprites tiverem tamanhos diferentes, você precisará definir o valor background-sizede cada sprite em um percentual, de modo que a largura desse sprite se torne 100%

Em outras palavras, se a imagem tiver 640px de largura e o sprite dentro dessa imagem tiver 45px de largura, para obter 45px com 640px

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

Então você precisa definir o deslocamento. A complicação do deslocamento é que 0% está alinhado à esquerda e 100% está alinhado à direita.

Como programador gráfico, eu esperaria que um deslocamento de 100% movesse o plano de fundo 100% pelo elemento, em outras palavras, totalmente do lado direito, mas não é isso que 100% significa quando usado backgrouhnd-position. background-position: 100%;significa alinhado à direita. Portanto, o fórum para levar isso em consideração após o dimensionamento é

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

Suponha que o deslocamento seja 31px

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

Aqui está uma imagem de 640 x 480 com 2 sprites.

1. em 31x 27y tamanho 45w 32h
2. em 500x 370y tamanho 105w 65h

Seguindo a matemática acima para 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>

Post antigo, mas aqui está o que eu fiz usando background-size:cover;(dica de chapéu para @Ceylan Pamir) ...

EXEMPLO DE USO
Alavanca de círculo horizontal (passe o cursor na imagem da frente, vira para trás com imagem diferente).

EXEMPLO SPRITE
480px x 240px

EXEMPLO TAMANHO FINAL
Imagem única @ 120px x 120px

CÓDIGO GENÉRICO
.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;}

CASO ABREVIADO FIDDLE
http://jsfiddle.net/zuhloobie/133esq63/2/

tente usar o tamanho do plano de fundo: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

existe algo que o impede de renderizar as imagens no tamanho que você deseja em primeiro lugar?

Demorei um pouco para criar uma solução para esse problema que me agradou:

Problema:

• Um sprite de ícones SVG - digamos 80px x 3200px

• Queremos escalar cada uso deles em seletores de conteúdo (: antes /: depois) em vários lugares, em vários tamanhos, sem redefinir as coordenadas de cada sprite com base no tamanho usado.

Portanto, esta solução permite que você use os mesmos Sprite co-ords em um <button>como um <menuitem>enquanto ainda dimensioná-lo.

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

Usando porcentagens (com 2 casas decimais) na posição do plano de fundo em vez do tamanho do plano de fundo, conforme sugerido por outras pessoas aqui, você pode dimensionar a mesma declaração de ícone para qualquer tamanho, sem precisar redeclará-la.

A porcentagem da posição y é a altura original do sprite / altura do ícone como% - no nosso caso aqui 80px * 100 / 3200px == cada sprite é representado por uma posição y de 2,5%.

Se você tiver estados de pairar / passar o mouse, poderá dobrar a largura do sprite e especificar na coordenada posição x.

A desvantagem dessa abordagem é que a adição de mais ícones em uma data posterior alterará a altura do sprite e, portanto, a posição y, mas se você não fizer isso, suas coordenadas do sprite precisarão de alterações para cada resolução em escala necessária.

Bem, acho que encontrei uma solução mais simples para dimensionar imagens: exemplo - digamos que exista uma imagem com três sprites de tamanho igual que você queira usar, use CSS para dimensionar a imagem

background-size : 300% 100%;

e especifique a altura e a largura personalizadas que precisam ser aplicadas ao seu elemento html, por exemplo:

 width :45%;
 height:100px;

Um código de exemplo ficaria assim:

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

sou bastante novo em css, e o estilo não é minha melhor área, isso pode ser uma maneira errada de fazê-lo .. mas funcionou para mim no Firefox / Chrome / Explorer 10, espero que funcione em versões mais antigas ..

Use transform: scale(...);e adicione correspondência margin: -...pxpara compensar o espaço livre da escala. (você pode usar * {outline: 1px solid}para ver os limites do elemento).

2018 aqui.Use o tamanho do plano de fundo com porcentagem.

FOLHA:

Isso pressupõe uma única linha de sprites. A largura da sua planilha deve ser um número que é divisível igualmente por 100 + largura de um sprite . Se você tiver 30 sprites de 108 x 108 px, adicione espaço em branco extra ao final para criar a largura final de 5508 px (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>

Use transform: scale(0.8);com o valor necessário em vez de 0,8

Defina a largura e a altura para o elemento de invólucro da imagem do sprite. Use este css.

{
    background-size: cover;
}

Fácil ... Usando duas cópias da mesma imagem em diferentes escalas na folha do sprite. Defina as cordas e o tamanho na lógica do aplicativo.