Sprites CSS con ridimensionamento dinamico

Question

Ho deciso di creare un foglio sprite per l'intero sito (+ -30 immagini) in modo da caricare 1 immagine e solo le posizioni di riferimento, riducendo il tempo di caricamento delle immagini e le chiamate al server.

La mia domanda: È possibile fare riferimento a un'immagine nel foglio sprite e quindi ridimensionare l'immagine al 100% del suo contenitore genitore?

Così, per esempio:

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

La larghezza del mio div è 100px, ma lo sprite che voglio fare riferimento è 20px (per esempio) - come posso Streth lo sprite estratto a crescere fino a 100px?

Cordiali saluti, Byron Cobb.

Answer 1

Bene, se si davvero si desidera una risposta, certo, perché no. Vedi: http://jsfiddle.net/3dsgn/3/

Fondamentalmente stiamo lavorando con CSS3 qui, quindi il supporto di IE (tranne 9) è inesistente. Dovrai inoltre utilizzare la versione con l'estensione -moz- per Firefox 3.6 e versioni successive. Anche la tecnica stessa è alquanto problematica. In realtà devi andare a calcolare i numeri da solo - le percentuali non funzionano, 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; 
}