डायनामिक साइजिंग

Question

के साथ सीएसएस स्प्राइट्स मैंने अपनी पूरी साइट (+ -30 छवियों) के लिए स्प्राइट शीट को क्रेट करने का निर्णय लिया है, इसलिए मैं 1 छवि लोड कर सकता हूं और केवल संदर्भ स्थिति, जो छवि लोड समय और सर्वर कॉल को कम कर देता है।

मेरा प्रश्न: क्या स्प्राइट शीट में एक छवि का संदर्भ देना संभव है और फिर उस छवि का आकार अपने मूल कंटेनर का 100% है?

तो उदाहरण के लिए:

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

मेरी div की चौड़ाई 100px है, लेकिन स्प्राइट मैं संदर्भ लेना चाहते हैं (उदाहरण के लिए) 20px है - मैं 100px करने के लिए विकसित करने के लिए निकाली गई स्प्राइट कैसे streth कर सकते हैं?

सम्मान, बायरन कोब।

Answer 1

ठीक है, अगर आप वास्तव में एक उत्तर चाहते हैं, तो, क्यों नहीं। देखें: http://jsfiddle.net/3dsgn/3/

असल में हम यहां CSS3 के साथ काम कर रहे हैं, इसलिए IE समर्थन (9 को छोड़कर) मौजूद नहीं है। आपको फ़ायरफ़ॉक्स 3.6 और उसके बाद के संस्करण के लिए -moz- एक्सटेंशन के साथ संस्करण का भी उपयोग करना होगा। तकनीक स्वयं कुछ परेशानी भी है। आपको वास्तव में संख्याओं को स्वयं जाना और गणना करना है - स्वाभाविक रूप से प्रतिशत काम नहीं करेंगे।

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