छवि-प्रतिपादन - सीएसएस-ट्रिक्स

image-renderingसंपत्ति परिभाषित करता है अगर यह ऊपर या अपने मूल आयामों से कम कर दिया जाता है कैसे ब्राउज़र एक छवि प्रस्तुत करना चाहिए। डिफ़ॉल्ट रूप से, प्रत्येक ब्राउज़र विकृति को रोकने के लिए इस स्केल की गई छवि को अलियासिंग लागू करने का प्रयास करेगा, लेकिन यह कभी-कभी एक समस्या हो सकती है यदि हम चाहते हैं कि छवि अपने मूल पिक्सेल आकार को संरक्षित करे।

img ( image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; )

उन तीन संभावित मूल्यों के बारे में:

• auto: डिफ़ॉल्ट मान जो किसी छवि की उपस्थिति को अधिकतम करने के लिए ब्राउज़र के मानक एल्गोरिदम का उपयोग करता है।
• crisp-edges: छवि के विपरीत, रंग और किनारों को किसी भी चौरसाई या धुंधला होने के बिना संरक्षित किया जाएगा। युक्ति के अनुसार यह विशेष रूप से पिक्सेल कला के लिए अभिप्रेत था। यह मान ऊपर या नीचे की छवियों पर लागू होता है।
• pixelated: जैसा कि छवि में परिवर्तन होता है, ब्राउज़र निकटतम-पड़ोसी स्केलिंग का उपयोग करके अपनी पिक्सेलयुक्त शैली को संरक्षित करेगा। यह मान केवल उन छवियों पर लागू होता है जिन्हें स्केल किया जाता है।

यह गुण पृष्ठभूमि-छवियों, canvasतत्वों और साथ ही इनलाइन छवियों पर लागू किया जा सकता है । हालांकि यह ध्यान रखना महत्वपूर्ण है कि इस समय इन मूल्यों का परीक्षण विशेष रूप से लगातार ब्राउज़र समर्थन की कमी के कारण भ्रमित है।

उदाहरण

यहाँ एक बहुत छोटी इनलाइन छवि है जो चार रंगीन पिक्सेल से बनी है:

यदि हम इस इनलाइन छवि की चौड़ाई को 300pxक्रोम (41) में बदलते हैं तो हम पाएंगे कि ब्राउज़र ने छवि को अनुकूलित करने का प्रयास किया है:

इसके मूल पिक्सेलयुक्त रूप को संरक्षित करने के लिए हम निम्न pixelatedमूल्य का उपयोग कर सकते हैं , जैसे:

img ( image-rendering: pixelated; )

यह ब्राउज़र में एक वैकल्पिक एल्गोरिदम चुनने का परिणाम है जिसके साथ छवि को संसाधित करना है। इस उदाहरण में Chrome डिफ़ॉल्ट एलियासिंग को हटा देगा:

दुर्भाग्य से बहुत सारे परीक्षण के बाद ऐसा लगता है कि ब्राउज़र इस समय बहुत ही भ्रामक तरीकों से crisp-edgesऔर pixelatedमूल्यों की व्याख्या करते हैं, इसलिए एक बार फिर ध्यान देना महत्वपूर्ण है कि यह विनिर्देश अपने शुरुआती दिनों में है। उदाहरण के लिए, क्रोम pixelatedछवियों को उसी तरह प्रस्तुत करता है जिस तरह फ़ायरफ़ॉक्स और सफारी छवियों को प्रस्तुत करेंगे crisp-edges।

क्यूआर कोड उदाहरण

इस संपत्ति का एक अन्य उपयोग QR कोड के लिए हो सकता है, जहाँ आप मानक एंटी-अलियासिंग का उपयोग करके इसे विकृत किए बिना इसका आकार बढ़ाना चाहते हैं। छवि को देखने के लिए पूर्ण स्क्रीन मोड में इस उदाहरण की जाँच करना सुनिश्चित करें:

कोडपैन पर रॉबिन रेंडल (@robinrendle) द्वारा पेन इमेज-रेंडर डेमो देखें।

उदाहरण टॉगल करें

नीचे दिए गए पेन में इन मूल्यों के बीच टॉगल करना और ब्राउज़रों के बीच विसंगतियों को देखना संभव है:

कोडपैन पर रॉबिन रेंडल (@robinrendle) द्वारा पेन इमेज रेंडरिंग डेमो देखें।

ब्राउज़र का समर्थन

crisp-edgesवर्तमान -moz-crisp-edgesमें सर्वश्रेष्ठ समर्थन प्राप्त करने के लिए विक्रेता उपसर्गों ( ) की आवश्यकता होती है।

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
४१	3.6 *	1 1*	। ९	१०

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	85 *	81	10.0-10.2

इस अपडेट के समय, फ़ायरफ़ॉक्स 61 सपोर्ट करता है crisp-edgesलेकिन pixelatedक्रोम 68 सपोर्ट करता है pixelatedलेकिन नहीं crisp-edges।