sprites CSS con tamaño dinámico

Question

He decidido colocar una hoja de sprites para todo el sitio (+ -30 imágenes) para poder cargar 1 imagen y solo posiciones de referencia, lo que reduce el tiempo de carga de imágenes y las llamadas al servidor.

Mi pregunta es: ¿Es posible hacer referencia a una imagen en la hoja de sprite y luego dimensionar esa imagen al 100% de su contenedor padre?

Así, por ejemplo:

#SomeDiv 
{ 
    background: url("/Content/Images/SpriteSheet.png") -125px 0 no-repeat; 
    width:100px; 
} 

El ancho de mi div es 100px, pero el sprite que quiero hacer referencia es de 20 píxeles (por ejemplo) - ¿cómo puedo streth el sprite extraída de crecer a 100px?

Atentamente, Byron Cobb.

Answer 1

Bueno, si realmente quiere una respuesta, seguro, ¿por qué no? Ver: http://jsfiddle.net/3dsgn/3/

Básicamente estamos trabajando con CSS3 aquí, por lo que el apoyo de IE (excepto 9) es inexistente. También deberá usar la versión con la extensión -moz- para Firefox 3.6 y versiones posteriores. La técnica en sí misma también es un tanto problemática. De hecho, tiene que ir y calcular los números usted mismo: los porcentajes no funcionarán, naturalmente.

#sprite-large { 

    /* All of these numbers are 2x their normal, 
     though tweaked slightly so that they will look okay */ 
    width: 36px; 
    height: 36px; 
    background: url('url/to/your/image.png') -38px -112px; 

    -moz-background-size: 448px 368px; 
    background-size: 448px 368px; 
}