css - online - sprites imagenes

¿Cómo puedo escalar una imagen en un sprite de CSS?

Question

En este artículo, http://css-tricks.com/css-sprites/ , se explica cómo puedo recortar una imagen más pequeña de una imagen más grande. ¿Puede decirme si es posible / cómo puedo recortar una imagen más pequeña y luego escalar la región recortada antes de colocarla?

Aquí hay un ejemplo de ese artículo:

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

Me gustaría saber cómo puedo escalar esa imagen después de cortarla desde spriteme1.png

Aquí está la URL del ejemplo: http://css-tricks.com/examples/CSS-Sprites/Example1After/

Entonces, me gustaría saber si puedo hacer que los íconos al lado del Item1,2,3,4 sean más pequeños.

Answer 1

Bueno, creo que encontré una solución más simple para escalar imágenes: ejemplo: digamos que hay una imagen con 3 sprites del mismo tamaño que querría usar, use CSS para escalar la imagen

background-size : 300% 100%;

y luego especifique la altura y el ancho personalizados que deben aplicarse a su elemento html, por ejemplo:

 width :45%;
 height:100px;

Un código de muestra se vería así:

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

soy bastante nuevo en css, y el estilo no es mi mejor área, esta podría ser una forma incorrecta de hacerlo ... pero funcionó para mí en Firefox / Chrome / Explorer 10, espero que también funcione en versiones anteriores ...

Answer 2

Cuando usas sprites, estás limitado a las dimensiones de la imagen en el sprite. La propiedad de CSS de background-size , mencionada por Stephen, aún no es ampliamente compatible y podría causar problemas con navegadores como IE8 y versiones posteriores, y dada su participación en el mercado, esta no es una opción viable.

Otra forma de resolver el problema es usar dos elementos y escalar el sprite utilizándolo con una etiqueta img , como esta:

<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 esta forma, el elemento externo ( div.sprite-image ) está recortando una imagen de 20x20px desde la etiqueta img , que actúa como una background-image escalada.

Answer 3

Establezca el ancho y el alto en el elemento contenedor de la imagen de sprite. Usa este css.

{
    background-size: cover;
}

Answer 4

Esto es lo que hice para hacer esto. Tenga en cuenta que no funcionará en IE8 y abajo.

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

El ancho de la imagen de fondo se reducirá a medida que el elemento principal de #element reduzca. Usted puede hacer lo mismo con su altura, también, si convierte la height a un porcentaje. Lo único difícil es calcular los porcentajes para background-position .

El primer porcentaje es el ancho del área seleccionada del sprite cuando está a un ancho normal dividido por el ancho total del sprite y multiplicado por 100.

El segundo porcentaje es la altura del área objetivo del sprite antes de ser escalado dividido por la altura total del sprite y multiplicado por 100.

La redacción de esas dos ecuaciones es un poco descuidada, así que avíseme si necesita que lo explique mejor.

Answer 5

Fácil ... Usando dos copias de la misma imagen con diferentes escalas en la hoja del sprite. Establezca las Coords y el tamaño en la lógica de la aplicación.

Answer 6

Me llevó un tiempo crear una solución a este problema con el que estaba contento:

Problema:

• Un sprite de iconos SVG - digamos 80px x 3200px

• Queremos escalar cada uso de ellos en selectores de contenido (: antes / después) en varios lugares y en varios tamaños sin volver a definir los co-ords de cada elemento basado en el tamaño utilizado.

Así que esta solución le permite usar los mismos co-ordenes de sprites en un <button> como un <menuitem> mientras sigue escalando.

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

Al usar porcentajes (hasta 2 lugares decimales) en posición de fondo en lugar de fondo como lo sugirieron otros aquí, puede escalar la misma declaración de icono a cualquier tamaño, sin necesidad de volver a declararlo.

El porcentaje de posición y es la altura / altura del icono del sprite original como% - en nuestro caso aquí 80px * 100 / 3200px == cada sprite está representado por una posición y de 2.5%.

Si tiene estados de desplazamiento / desplazamiento, puede duplicar el ancho del elemento y especificarlo en la coordenada de posición x.

La desventaja de este enfoque es que agregar más íconos en una fecha posterior cambiará la altura del sprite y, por lo tanto, la posición y%, pero si no lo hace, las coordenadas de su sprite necesitarán cambiar para cada resolución escalada que requiera.

Answer 7

Pruebe esto: http://tobyj.net/responsive-sprites/ (demo y explicación)

Este método escala los sprites ''de forma receptiva'' para que el ancho / alto se ajuste de acuerdo con el tamaño de la ventana del navegador. No usa background-size ya que no existe support para esto en navegadores más antiguos.

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>

Answer 8

Publicación anterior, pero esto es lo que hice usando background-size:cover; (punta de sombrero para @Ceylan Pamir) ...

EJEMPLO DE USO
Aleta de círculo horizontal (coloque el cursor sobre la imagen del lado frontal, voltea hacia atrás con una imagen diferente).

EJEMPLO SPRITE
480px x 240px

EJEMPLO TAMAÑO FINAL
Imagen individual @ 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;}

ABREVIATED CASE FIDDLE
http://jsfiddle.net/zuhloobie/133esq63/2/

Answer 9

Puede usar el fondo de pantalla , ya que es compatible con la mayoría de los navegadores (pero no con todos los http://caniuse.com/#search=background-size )

background-size : 150% 150%;

O

Puedes usar un combo de zoom para webkit / ie y transformar: scale para Firefox (-moz-) y Opera (-o-) para cross-browser de escritorio y móvil

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

Answer 10

Usar transform: scale(...); y agregue un margin: -...px coincidente margin: -...px para compensar el espacio libre de la escala. (puede usar * {outline: 1px solid} para ver los límites del elemento).

Answer 11

intente usar el tamaño de fondo: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

¿Hay algo que te impida hacer las imágenes al tamaño que quieres en primer lugar?

Answer 12

transform: scale(); hará que el elemento original conserve su tamaño.

Encontré que la mejor opción es usar vw . Está funcionando como un 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>

Answer 13

2018 respuesta

Respondo en una pregunta similar aquí: https://.com/a/49967010/1919821