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

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://sofes.miximages.com/css/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.

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

    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:

     
    icon

    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.

    Prueba esto: Sprites elásticos : entre varios navegadores, ajuste / estiramiento responsivo de imágenes de sprites CSS

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

       icon    icon    icon  

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

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

    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?

    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/

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

    Problema:

    • Un sprite de icons 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 como un 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 statement 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.

    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 …

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

     { background-size: cover; } 

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

    2018 respuesta

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

    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.