मैं सीएसएस स्प्राइट में एक छवि कैसे स्केल कर सकता हूं

Question

इस लेख में, http://css-tricks.com/css-sprites/ , यह बात करता है कि मैं 1 बड़ी छवि से छोटी छवि को कैसे काट सकता हूं। क्या आप मुझे बता सकते हैं कि क्या यह संभव है / कैसे मैं एक छोटी छवि को काट सकता हूं और फिर इसे बिछाने से पहले क्रॉप्ड क्षेत्र को स्केल कर सकता हूं?

यहाँ उस लेख से एक उदाहरण है:

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

मैं यह जानना चाहूंगा कि spriteme1.png से फसल लेने के बाद मैं उस छवि को कैसे माप सकता हूं

यहाँ उदाहरण का URL है: http://css-tricks.com/examples/CSS-Sprites/Example/An/

इसलिए मैं जानना चाहूंगा कि क्या मैं आइटम 1 के साथ आइकन बना सकता हूं।

Comments

जैसा कि स्टीफन ने पूछा, क्या आप उन चित्रों को आकार देने से रोक रहे हैं, जो आप उन्हें पहले स्थान पर चाहते हैं?

— पॉल डी। वेट

मैं इस पृष्ठ पर समाप्त हुआ क्योंकि मैं एक ही चीज़ के लिए उत्तर खोज रहा था। उच्च परिभाषा रेटिना के साथ आज की दुनिया में यह प्रदर्शित करने के लिए आकार की तुलना में दो बार एक छवि बनाने के लिए प्रथागत है और फिर प्रदर्शन करते समय इसे ऊंचाई / चौड़ाई को कम करने के लिए <img> विशेषताओं या सीएसएस शैलियों में ऊंचाई / चौड़ाई मूल्यों का उपयोग करें। यह स्मार्टफोन और टैबलेट पर कुरकुरा प्रदर्शन सुनिश्चित करता है। लेकिन पीएनजी स्प्राइट्स कैशिंग और रेंडरिंग के लिए जल्दी से महान हैं। यह सबसे अच्छा होगा कि न केवल एक 2x छवियों के स्प्राइट का उपयोग करें, बल्कि फिर इसे एक ऐसे आकार में स्केल करें जो इसे कुरकुरा भी दिखे।

— आर्ट जाइगेल सेप

जैसा कि मूल प्रश्न को कभी भी एक स्वीकृत उत्तर नहीं मिला है और एक बहुत ही साफ-सुथरा और पिछड़ा संगत समाधान है, मैंने एक नया कोडपेन स्ट्रेची संस्करण बनाया, क्योंकि मूल वेबसाइट अब ऑनलाइन नहीं है और maaaaybe अभी भी कुछ लोग हैं जो पिछड़े की जरूरत है संगत समाधान। मैंने कलम को मूल काम / लेखक के गुण के साथ बनाया है।

— सभी बिट्स बराबर

Answer 1

आप अधिकांश ब्राउज़र द्वारा समर्थित पृष्ठभूमि के आकार का उपयोग कर सकते हैं (लेकिन सभी http://caniuse.com/#search=background-says ) नहीं

background-size : 150% 150%;

या

आप क्रॉस-ब्राउज़र डेस्कटॉप और मोबाइल के लिए फ़ायरफ़ॉक्स / ( और ट्रांसफ़ॉर्म: स्केल फॉर फ़ायरफ़ॉक्स (-मोज़-) और ओपेरा -ओ-) के लिए ज़ूम ऑफ़ कॉम्बो का उपयोग कर सकते हैं

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

Comments

Chrome में बढ़िया काम करता है, FF, IE9 / 10 में ठीक काम करता है। अधिकांश भाग के लिए वांछित प्रभाव पैदा करता है।

— RCNeil

उपयोग (उदाहरण) पृष्ठभूमि-आकार: 15%; सही पहलू अनुपात रखते हुए स्प्राइट्स के लिए एकदम सही काम करता है। यह संवेदनशील साइटों पर ब्रेकप्वाइंट के साथ उपयोग करने के लिए एक सरल समाधान है।

— C13L0

पृष्ठभूमि के आकार की संपत्ति ने एक निश्चित ऊंचाई और चौड़ाई के साथ मेरे svg स्प्राइट के लिए काम नहीं किया, हालांकि पैमाने ने चाल चली।

— आंद्रे

IE8 में समर्थन जोड़ने के लिए, IE8 मानक मोड में ज़ूम के पर्याय के रूप में -ms-zoom विशेषता का उपयोग करें। -ms-zoom: 0.7; अधिक जानकारी के लिए नीचे दिए गए लिंक देखें: msdn.microsoft.com/en-us/library/ms531189(v=vs.85).aspx

— Amr

2017 अपडेट: पृष्ठभूमि का आकार IE9 + सहित सभी प्रमुख ब्राउज़रों द्वारा समर्थित है। caniuse.com/#search=background-size

— नाथन

Answer 2

जब आप स्प्राइट का उपयोग करते हैं, तो आप स्प्राइट में छवि के आयामों तक सीमित होते हैं। background-sizeसीएसएस संपत्ति, स्टीफन ने उल्लेख किया, व्यापक रूप से अभी तक समर्थित नहीं है और IE8 तरह और नीचे ब्राउज़रों के साथ समस्याओं के कारण हो सकता है - और उनके बाजार में हिस्सेदारी को देखते हुए, यह एक व्यवहार्य विकल्प नहीं है।

समस्या को हल करने का दूसरा तरीका दो तत्वों का उपयोग करना है और एक imgटैग के साथ इसका उपयोग करके स्प्राइट को स्केल करना है , जैसे:

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

इस तरह, बाहरी तत्व ( div.sprite-image) imgटैग से 20x20px की छवि क्रॉप कर रहा है , जो एक स्केल की तरह काम करता है background-image।

Comments

यहाँ क्लेटस और क्वेंटिन स्टेटेट की तरह , यह सबसे अच्छा तरीका नहीं हो सकता है। मेरे लिए यह एक डीलब्रेकर है - मुझे srcसीएसएस द्वारा असाइन करने की आवश्यकता है ।

— Jook

-1: आप प्रस्तुति तत्वों को सामग्री / डेटा के साथ नहीं मिला सकते हैं। <img>केवल तभी उपयोग किया जाना चाहिए जब यह सामग्री का हिस्सा हो। डिजाइन उद्देश्यों के लिए, पृष्ठभूमि चित्र बहुत जरूरी हैं।

— शायरियार इमानोव

सर्वश्रेष्ठ उत्तर (ए) सार्वभौमिक रूप से काम करता है, (बी) मनुष्यों द्वारा समझ में आता है, (सी) संक्षिप्त है, ... (जेड) सामग्री से प्रस्तुति को अलग करता है।

— बॉब स्टीन

Answer 3

इसे आज़माएँ: स्ट्रेची स्प्राइट्स - क्रॉस-ब्राउज़र, सीएसएस स्प्राइट छवियों का आकार बदलने / फैलाने के लिए उत्तरदायी

यह विधि तराजू को 'जिम्मेदारी से' फैलाती है ताकि आपके ब्राउज़र विंडो के आकार के अनुसार चौड़ाई / ऊँचाई समायोजित हो जाए। यह पुराने ब्राउज़रों में इसके लिए समर्थन के रूप में उपयोग नहीं करता है गैर-मौजूद है।background-size

सीएसएस

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

एचटीएमएल

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

Comments

लिंक वास्तव में यहाँ सिद्धांत की व्याख्या नहीं करता है। आप अतिप्रवाह के साथ एक div का उपयोग कर रहे हैं: स्प्राइट छवि के स्केल किए गए संस्करण का उपयोग करने के शीर्ष पर एक क्रॉपिंग क्षेत्र / विंडो के रूप में छिपा हुआ है। यही कारण है कि यह एक पृष्ठभूमि छवि का उपयोग नहीं करता है। मुखौटा के रूप में बस एक परत दूसरे के ऊपर।

— साइमन

स्पेसर एक छवि होना चाहिए या इसके बजाय एक साधारण div का उपयोग किया जा सकता है?

— तपिर

इसका एक कूट उदाहरण इस प्रकार है। यह केवल क्षैतिज या ऊर्ध्वाधर स्प्राइट के लिए काम करने लगता है। ग्रिड नहीं।

— वर्नट

मैंने एक नया कोडपैन स्ट्रेची संस्करण बनाया, क्योंकि मूल वेबसाइट अब ऑनलाइन नहीं है और maaaaybe वहाँ अभी भी कुछ लोग हैं जो एक पिछड़े संगत समाधान की आवश्यकता है। मैंने कलम को मूल काम / लेखक के श्रेय से बनाया है

— सभी बिट्स बराबर

Answer 4

transform: scale(); मूल तत्व को उसके आकार को बनाए रखेगा।

मैंने पाया कि सबसे अच्छा विकल्प उपयोग करना है vw। यह एक आकर्षण की तरह काम कर रहा है:

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>

Comments

नमस्कार, इस सवाल का जवाब नहीं है। आपको एक ही छवि के विभिन्न पैमानों के साथ तीन विभाजनों को दिखाना चाहिए। कुछ शब्दों में, इसे "फ़ॉन्ट" के विभिन्न आकार दिखाने चाहिए। क्या आप इसे ठीक कर सकते हैं?

— रॉबर्ट

हाय @ रोबर्ट। अभी के बारे में कैसे?

— टॉमाज़ मूलार्क

PS क्या आपने VW माप इकाई का उपयोग करते हुए व्यवहार को देखा है?

— रॉबर्ट

मुझे यकीन नहीं है, आपके व्यवहार का क्या मतलब है?

— टॉमाज़ मूलार्क

VW VH व्यूपोर्ट आकार के साथ आनुपातिक रूप से स्केलिंग कर रहे हैं। मैंने अब तक उनका कभी इस्तेमाल नहीं किया। यह उनके उपयोग के बारे में आपके अनुभव के बारे में सिर्फ एक जिज्ञासा है। क्या वे इतने "जादू" हैं या आपके द्वारा देखे गए कुछ स्थितियों में विचार (अप्रत्याशित व्यवहार) करने के लिए मुद्दे हैं? साभार

— रॉबर्ट

Answer 5

यहाँ मैंने ऐसा करने के लिए क्या किया। ध्यान रखें कि यह IE8 और उससे नीचे के काम नहीं करेगा।

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

पृष्ठभूमि की छवि की चौड़ाई नीचे #elementतराजू के माता-पिता के रूप में होगी । यदि आप heightप्रतिशत में परिवर्तित करते हैं, तो आप इसकी ऊंचाई के साथ भी ऐसा कर सकते हैं । केवल मुश्किल बिट के लिए प्रतिशत का पता लगा रहे हैं background-position।

पहला प्रतिशत स्प्राइट के लक्षित क्षेत्र की चौड़ाई है जब सामान्य चौड़ाई में स्प्राइट की कुल चौड़ाई से विभाजित किया जाता है, और 100 से गुणा किया जाता है।

दूसरा प्रतिशत स्प्राइट के कुल ऊंचाई से विभाजित होने से पहले स्प्राइट के लक्षित क्षेत्र की ऊंचाई है, और 100 से गुणा किया गया है।

उन दो समीकरणों पर शब्द थोड़ा टेढ़ा है, इसलिए मुझे बताएं कि क्या आपको इसकी बेहतर व्याख्या करने की आवश्यकता है।

Answer 6

यह मेरे लिए काम करने लगता है।

यदि स्प्राइट्स ग्रिड में हैं, तो स्प्राइट्स की background-size100% संख्या और स्प्राइट्स की 100% संख्या निर्धारित करें। फिर उपयोग करेंbackground-position -<x*100>% -<y*100>% जहां x और y शून्य आधारित स्प्राइट हैं, वहां

दूसरे शब्दों में, यदि आप चाहते हैं कि बाईं ओर से तीसरा स्प्राइट और दूसरी पंक्ति जो 2 से अधिक है और 1 नीचे है

background-position: -200% -100%;

उदाहरण के लिए यहां एक स्प्राइट शीट 4x2 स्प्राइट है

और यहाँ एक उदाहरण है

div {
  margin: 3px;
  display: inline-block;
}
.sprite {
  background-image: url('https://i.stack.imgur.com/AEYNC.png');
  background-size: 400% 200%;  /* 4x2 sprites so 400% 200% */
}
.s0x0 { background-position:    -0%   -0%; }
.s1x0 { background-position:  -100%   -0%; }
.s2x0 { background-position:  -200%   -0%; }
.s3x0 { background-position:  -300%   -0%; }
.s0x1 { background-position:    -0%  -100%; }
.s1x1 { background-position:  -100%  -100%; }
.s2x1 { background-position:  -200%  -100%; }
.s3x1 { background-position:  -300%  -100%; }

<div class="sprite s3x1" style="width: 45px; height:20px"></div>
<div class="sprite s3x1" style="width: 128px; height:30px"></div>
<div class="sprite s3x1" style="width: 64px; height:56px"></div>
<div class="sprite s2x1" style="width: 57px; height:60px"></div>
<div class="sprite s3x0" style="width: 45px; height:45px"></div>
<div class="sprite s0x1" style="width: 12px; height:100px"></div>

<br/>
<div class="sprite s0x0" style="width: 45px; height:20px"></div>
<div class="sprite s1x0" style="width: 128px; height:45px"></div>
<div class="sprite s2x0" style="width: 64px; height:56px"></div>
<div class="sprite s3x0" style="width: 57px; height:60px"></div>
<br/>
<div class="sprite s0x1" style="width: 45px; height:45px"></div>
<div class="sprite s1x1" style="width: 12px; height:50px"></div>
<div class="sprite s2x1" style="width: 12px; height:50px"></div>
<div class="sprite s3x1" style="width: 12px; height:50px"></div>

यदि स्प्राइट्स अलग-अलग आकार के हों, तो आपको background-sizeप्रत्येक स्प्राइट को प्रतिशत में सेट करने की आवश्यकता होगी , ताकि स्प्राइट की चौड़ाई 100% हो जाए

दूसरे शब्दों में अगर छवि 640px चौड़ी है और उस चित्र के अंदर स्प्राइट 45px चौड़ा है तो उस 45px को 640px होने के लिए

xScale = imageWidth / spriteWidth
xScale = 640 / 45
xScale = 14.2222222222
xPercent = xScale * 100
xPercent = 1422.22222222%

फिर आपको ऑफसेट सेट करने की आवश्यकता है। ऑफसेट की जटिलता यह है कि 0% को बाईं ओर और 100% को दाएं से संरेखित किया गया है।

ग्राफिक्स प्रोग्रामर के रूप में, मुझे उम्मीद है कि तत्व में 100% पृष्ठभूमि को स्थानांतरित करने के लिए पूरे तत्व को दूसरे शब्दों में, पूरी तरह से दाईं ओर से बंद कर दिया जाएगा, लेकिन 100% का मतलब यह नहीं है कि इसका उपयोग कब किया जाए backgrouhnd-position। background-position: 100%;सही गठबंधन का मतलब है। तो, स्केलिंग के बाद उस खाते में लेने के लिए मंचों

xOffsetScale = 1 + 1 / (xScale - 1)              
xOffset = offsetX * offsetScale / imageWidth

मान लें कि ऑफसेट 31 पीएक्स है

xOffsetScale = 1 + 1 / (14.222222222 - 1)
xOffsetScale = 1.0756302521021115
xOffset = offsetX * xOffsetScale / imageWidth
xOffset = 31 * 1.0756302521021115 / 640
xOffset = 0.05210084033619603
xOffsetPercent = 5.210084033619603

यहां 2 स्प्राइट्स के साथ 640x480 की छवि है।

1. 31x 27y आकार में 45w 32h
2. 500x 370 के आकार पर 105w 65h

स्प्राइट 1 के लिए ऊपर दिए गए गणित का पालन करें

xScale = imageWidth / spriteWidth
xScale = 640 / 45
xScale = 14.2222222222
xPercent = xScale * 100
xPercent = 1422.22222222%

xOffsetScale = 1 + 1 / (14.222222222 - 1)
xOffsetScale = 1.0756302521021115
xOffset = offsetX * xOffsetScale / imageWidth
xOffset = 31 * 1.0756302521021115 / 640
xOffset = 0.05210084033619603
xOffsetPercent = 5.210084033619603

yScale = imageHeight / spriteHEight
yScale = 480 / 32
yScale = 15
yPercent = yScale * 100
yPercent = 1500%

yOffsetScale = 1 + 1 / (15 - 1)
yOffsetScale = 1.0714285714285714
yOffset = offsetY * yOffsetScale / imageHeight
yOffset = 27 * 1.0714285714285714 / 480
yOffset = 0.06026785714285714
yOffsetPercent = 6.026785714285714

div {
  margin: 3px;
  display: inline-block;
}
.sprite {
  background-image: url('https://i.stack.imgur.com/mv9lJ.png');
}
.s1 {
  background-size:      1422.2222% 1500%;
  background-position:  5.210084033619603% 6.026785714285714%;
}
.s2 {
  background-size:      609.5238095238095% 738.4615384615385%;
  background-position:  93.45794392523367% 89.1566265060241%;
}

<div class="sprite s1" style="width: 45px; height:20px"></div>
<div class="sprite s1" style="width: 128px; height:30px"></div>
<div class="sprite s1" style="width: 64px; height:56px"></div>
<div class="sprite s1" style="width: 57px; height:60px"></div>
<div class="sprite s1" style="width: 45px; height:45px"></div>
<div class="sprite s1" style="width: 12px; height:50px"></div>
<div class="sprite s1" style="width: 50px; height:40px"></div>
<hr/>
<div class="sprite s2" style="width: 45px; height:20px"></div>
<div class="sprite s2" style="width: 128px; height:30px"></div>
<div class="sprite s2" style="width: 64px; height:56px"></div>
<div class="sprite s2" style="width: 57px; height:60px"></div>
<div class="sprite s2" style="width: 45px; height:45px"></div>
<div class="sprite s2" style="width: 12px; height:50px"></div>
<div class="sprite s2" style="width: 50px; height:40px"></div>

Comments

आपने ऑफसेट और ऑफसेट के मूल्यों की गणना कैसे की?

— ट्रिकहार्डर

Answer 7

पुरानी पोस्ट, लेकिन यहाँ मैंने क्या किया background-size:cover;(हैट टिप टू @ सीलन पामीर) ...

उदाहरण का उपयोग
क्षैतिज वृत्त फ्लिपर (सामने की ओर की छवि पर होवर, अलग छवि के साथ वापस जाता है)।

उदाहरण SPRITE
480px x 240px

उदाहरण अंतिम आकार
एकल छवि @ 120px x 120px

आम कोड
.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;}

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

Answer 8

पृष्ठभूमि आकार का उपयोग करने का प्रयास करें: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

क्या कोई ऐसी चीज़ है जो आपको उन छवियों को प्रदान करने से रोक रही है जो आप उन्हें पहले स्थान पर चाहते हैं?

Comments

क्या मैं इसे हल करने के लिए जावास्क्रिप्ट और सीएसएस का उपयोग कर सकता हूं? मैंने पृष्ठभूमि-आकार की कोशिश की; संपत्ति। मैं यह काम नहीं कर सकता। यह किसी कारण से छवि को स्केल नहीं करता है।

— माइकल

background-sizeCSS 3 है और अभी तक व्यापक रूप से समर्थित नहीं है।

— जम्मोसेन

अब अधिकांश ब्राउज़र संस्करणों द्वारा इसका समर्थन किया गया है। इस caniuse.com/#search=background-size

— kiranvj

Answer 9

मुझे इस समस्या का हल बनाने में थोड़ा समय लगा, जिससे मैं खुश था:

संकट:

• माउस का एक एसवीजी स्प्राइट - 80px x 3200px कहें

• हम सामग्री चयनकर्ताओं में उनके प्रत्येक उपयोग को पैमाने पर करना चाहते हैं: (पहले /: बाद) विभिन्न स्थानों पर विभिन्न आकारों में विभिन्न आकार के आधार पर प्रत्येक स्प्राइट के सह-ऑर्ड को फिर से परिभाषित किए बिना उपयोग किया जाता है।

तो यह समाधान आपको एक ही स्प्राइट के सह-ऑर्ड्स का उपयोग करने की अनुमति देता <button>है, <menuitem>जबकि अभी भी इसे स्केल कर रहा है।

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

यहां दूसरों द्वारा सुझाए गए पृष्ठभूमि के आकार के बजाय पृष्ठभूमि-स्थिति में प्रतिशत (2 दशमलव स्थानों पर) का उपयोग करके, आप किसी भी आकार को उसी आइकन घोषणा को स्केल कर सकते हैं, बिना इसे पुन: व्यवस्थित करने की आवश्यकता के।

स्थिति-y प्रतिशत एक% के रूप में मूल स्प्राइट ऊंचाई / आइकन ऊंचाई है - हमारे मामले में यहां 80px * 100 / 3200px == प्रत्येक स्प्राइट को 2.5% की वाई-स्थिति द्वारा दर्शाया गया है।

यदि आपके पास होवर / माउसओवर है, तो आप स्प्राइट की चौड़ाई को दोगुना कर सकते हैं और स्थिति-एक्स समन्वय में निर्दिष्ट कर सकते हैं।

इस दृष्टिकोण का नुकसान यह है कि बाद की तारीख में अधिक आइकन जोड़ने से स्प्राइट की ऊँचाई और इतनी y-स्थिति% बदल जाएगी, लेकिन यदि आप ऐसा नहीं करते हैं, तो आपके स्प्राइट को-ऑर्डिनेट्स को आपके द्वारा आवश्यक प्रत्येक स्केल रिज़ॉल्यूशन के लिए परिवर्तन की आवश्यकता होगी।

Answer 10

वैसे मुझे लगता है कि छवियों को स्केल करने के लिए एक सरल समाधान मिला: उदाहरण - कहते हैं कि 3 समान आकार के स्प्राइट के साथ एक छवि है जिसे आप उपयोग करना चाहते हैं, छवि को स्केल करने के लिए सीएसएस का उपयोग करें

background-size : 300% 100%;

और फिर कस्टम ऊंचाई और चौड़ाई निर्दिष्ट करें जिसे आपके HTML तत्व पर लागू करने की आवश्यकता है जैसे:

 width :45%;
 height:100px;

एक नमूना कोड कुछ इस तरह दिखेगा:

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

im सुंदर सीएसएस के लिए नया है, और स्टाइलिंग मेरा सबसे अच्छा क्षेत्र नहीं है यह करने का एक गलत तरीका हो सकता है .. लेकिन इसने मेरे लिए फ़ायरफ़ॉक्स / क्रोम / एक्सप्लोरर 10 में काम किया, आशा है कि यह पुराने संस्करणों में भी काम करेगा।

Answer 11

स्केलिंग से मुक्त स्थान की भरपाई के transform: scale(...);लिए मिलान margin: -...pxका उपयोग करें और जोड़ें । (आप * {outline: 1px solid}तत्व सीमाओं को देखने के लिए उपयोग कर सकते हैं )।

Answer 12

2018 यहां। प्रतिशत के साथ पृष्ठभूमि-आकार का उपयोग करें।

चादर:

यह स्प्राइट्स की एक पंक्ति मानता है। आपकी शीट की चौड़ाई एक संख्या होनी चाहिए जो एक स्प्राइट के 100 + चौड़ाई से समान रूप से विभाज्य हो । यदि आपके पास 30 स्प्रिट हैं जो 108x108 पीएक्स हैं, तो अंतिम चौड़ाई 5508px (50 * 108 + 108) बनाने के लिए अतिरिक्त रिक्त स्थान को अंत में जोड़ें।

सीएसएस:

.icon{
    height: 30px;  /* Set this to anything. It will scale. */
    width: 30px; /* Match height. This assumes square sprites. */
    background:url(<mysheeturl>);
    background-size: 5100% 100%; /*  5100% because 51 sprites. */
}

/* Each image increases by 2% because we used 50+1 sprites. 
   If we had used 20+1 sprites then % increase would be 5%. */

.first_image{
    background-position: 0% 0;
}

.ninth_image{
    background-position: 16% 0; /* (9-1) x 2 = 16 */
}

HTML:

<div class ="icon first_image"></div>
<div class ="icon ninth_image"></div>

Answer 13

transform: scale(0.8);0.8 के बजाय उस मान का उपयोग करें जिसकी आपको आवश्यकता है

Answer 14

स्प्राइट छवि के रैपर तत्व की चौड़ाई और ऊंचाई निर्धारित करें। इस सीएसएस का उपयोग करें।

{
    background-size: cover;
}

Comments

मुझे समझ में नहीं आ रहा है कि यह डाउन वोट क्यों है। मेरे लिए काम किया। जवाब के रूप में मेरी विधि पोस्ट करेंगे।

— क्रिस करें

मैं यहां क्रिस से सहमत हूं। यह मेरे मामले में समस्या को हल करता है। यकीन नहीं हो रहा है कि यह अपमानजनक है!

— शेलजेरो

यह स्प्राइट के साथ काम नहीं करता है (प्रश्न शीर्षक देखें), यही कारण है कि इस समाधान को नीचा दिखाया गया है।

— डिमको देसू

Answer 15

आसान ... स्प्राइट की शीट पर अलग-अलग पैमाने के साथ एक ही छवि की दो प्रतियों का उपयोग करना। ऐप के लॉजिक पर कोर्ड्स और साइज सेट करें।