रेटिना डिस्प्ले, उच्च-रेज पृष्ठभूमि छवियां

Question

यह एक मूर्ख सवाल की तरह लग सकता है।

यदि मैं नियमित रूप से प्रदर्शित करने के लिए इस सीएसएस स्निपेट का उपयोग करता हूं (जहां box-bg.png 200px 200px है);

.box{ 
    background:url('images/box-bg.png') no-repeat top left; 
    width:200px; 
    height:200px 
} 

और अगर मैं इस तरह एक मीडिया क्वेरी का उपयोग रेटिना प्रदर्शनों (@ 2x छवि उच्च रिज़ॉल्यूशन संस्करण जा रहा है) को लक्षित करने के लिए;

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{background:url('images/box-bg@2x.png') no-repeat top left;} 
} 

मैं नए उच्च रिज़ॉल्यूशन पृष्ठभूमि छवि मैच के लिए 400px से 400px तक .box div के आकार को दोगुना करने की जरूरत है?

Answer 1

नहीं, लेकिन आप मूल आकार-प्रकार के background-size गुण सेट करने की आवश्यकता है:

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{ 
     background:url('images/box-bg@2x.png') no-repeat top left; 
     background-size: 200px 200px; 
    } 
} 

---

संपादित

इस उत्तर के लिए एक छोटे से अधिक जोड़ने के लिए, यहाँ है रेटिना डिटेक्शन क्वेरी का उपयोग करने के लिए मैं उपयोग करता हूं:

@media 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and ( min--moz-device-pixel-ratio: 2), 
only screen and ( -o-min-device-pixel-ratio: 2/1), 
only screen and (  min-device-pixel-ratio: 2), 
only screen and (    min-resolution: 192dpi), 
only screen and (    min-resolution: 2dppx) { 

} 

- Source

एनबी। यह min--moz-device-pixel-ratio: एक टाइपो नहीं है। यह फ़ायरफ़ॉक्स के कुछ संस्करणों में एक अच्छी तरह से प्रलेखित बग है और पुराने संस्करणों (फ़ायरफ़ॉक्स 16 से पहले) का समर्थन करने के लिए इस तरह लिखा जाना चाहिए। - Source

---

@LiamNewmarch नीचे टिप्पणी में उल्लेख किया है, तुम इतनी तरह background घोषणा अपने आशुलिपि में background-size शामिल कर सकते हैं:

.box{ 
    background:url('images/box-bg@2x.png') no-repeat top left/200px 200px; 
} 

हालांकि, मैं व्यक्तिगत रूप से के रूप में आशुलिपि फ़ॉर्म का उपयोग करके सलाह नहीं होगा यह आईओएस < = 6 या एंड्रॉइड में समर्थित नहीं है जो इसे ज्यादातर स्थितियों में अविश्वसनीय बनाता है।

Answer 2

यहाँ एक समाधान है कि भी उच्च (ईआर) शामिल डीपीआई है (MDPI) उपकरणों इंच प्रति > ~ 160 डॉट्स काफी कुछ गैर iOS उपकरण (फ़े: गूगल नेक्सस 7 2012): जैसे

.box { 
    background: url('img/box-bg.png') no-repeat top left; 
    width: 200px; 
    height: 200px; 
} 
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), 
     only screen and ( min--moz-device-pixel-ratio: 1.3), 
     only screen and (  -o-min-device-pixel-ratio: 2.6/2), /* returns 1.3, see Dev.Opera */ 
     only screen and (  min-device-pixel-ratio: 1.3), 
     only screen and (min-resolution: 124.8dpi), 
     only screen and (min-resolution: 1.3dppx) { 

     .box { 
      background: url('img/box-bg@2x.png') no-repeat top left/200px 200px; 
     } 

} 

टिप्पणियों से प्रतिक्रिया प्राप्त करने के बाद @ 3rror404 को उनके संपादन में शामिल किया गया है, तो वेबकिट/आईफोन से परे एक दुनिया है। एक बात जो मुझे अब तक के अधिकांश समाधानों के साथ बग्स करती है, जैसा कि CSS-Tricks पर उपरोक्त स्रोत के रूप में संदर्भित है, यह है कि यह पूरी तरह से ध्यान में नहीं लिया जाता है।
original source पहले से ही आगे चला गया।

उदाहरण के तौर पर नेक्सस 7 (2012) स्क्रीन एक टीवीडीपीआई स्क्रीन एक अजीब device-pixel-ratio of 1.325 के साथ है। सामान्य रिज़ॉल्यूशन वाले छवियों को लोड करते समय उन्हें इंटरपोलेशन के माध्यम से अपरिवर्तित किया जाता है और इसलिए धुंधला होता है। मेरे लिए मीडिया क्वेरी में इस नियम को लागू करने के लिए उन उपकरणों को शामिल करने के लिए सर्वोत्तम ग्राहक प्रतिक्रिया में सफल रहा।

Answer 3

यदि आप रेटिना और गैर-रेटिना स्क्रीन के लिए एक ही छवि का उपयोग करने की योजना बना रहे हैं तो यहां समाधान है। मान लें कि आपके पास 200x200 की एक छवि है और शीर्ष पंक्ति में दो आइकन और नीचे पंक्ति में दो आइकन हैं। तो, यह चार चौथाई है।

.sprite-of-icons { 
    background: url("../images/icons-in-four-quad-of-200by200.png") no-repeat; 
    background-size: 100px 100px /* Scale it down to 50% rather using 200x200 */ 
} 

.sp-logo-1 { background-position: 0 0; } 

/* Reduce positioning of the icons down to 50% rather using -50px */ 
.sp-logo-2 { background-position: -25px 0; } 
.sp-logo-3 { background-position: 0 -25px; } 
.sp-logo-3 { background-position: -25px -25px; } 

स्प्राइट आइकन की स्केलिंग और स्थिति वास्तविक मूल्य से 50% तक, आप अपेक्षित परिणाम प्राप्त कर सकते हैं।