रेटिना प्रदर्शित करता है, उच्च Res पृष्ठभूमि छवियों


102

यह एक मूर्खतापूर्ण प्रश्न की तरह लग सकता है।

अगर मैं इस सीएसएस स्निपेट को नियमित डिस्प्ले के लिए उपयोग करता हूं (जहां box-bg.png200px तक 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;}
}

क्या मुझे .boxनई हाई रेस बैकग्राउंड इमेज से मिलान करने के लिए div का साइज 400px से 400px तक दोगुना करना होगा ?


Images/box-bg@2x.png का आयाम क्या है? कृपया इसे बिल्कुल स्पष्ट होने के लिए प्रश्न पर रखें।
TMS

जवाबों:


184

क्या मुझे नई हाई रेस बैकग्राउंड इमेज से मेल करने के लिए .box div का आकार 400px से 400px तक दोगुना करना होगा

नहीं, लेकिन आपको 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) { 

}

- स्रोत

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


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

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

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


किसी भी टिप को आप एक पूर्ण पृष्ठ पृष्ठभूमि के लिए पृष्ठभूमि के आकार की स्थापना के लिए पेश करेंगे? मुझे पता है x घटक की चौड़ाई, लेकिन y के बारे में कैसे?
रैंडी एल

3
@ अन्य मामले में आप शायद उपयोग करना चाहते हैं background-size: cover;। यह छवि के साथ पूरी पृष्ठभूमि को "कवर" करते हुए पहलू अनुपात बनाए रखेगा।
शलजम

4
आप चाहें, तो आप को एकीकृत कर सकते background-sizeमें संपत्ति backgroundतो जैसे: background: url('images/box-bg@2x.png') no-repeat top left / 200px 200px। ध्यान दें कि समर्थन नहीं करने वाले ब्राउज़र background-sizeइस नियम की अनदेखी करेंगे।
लियाम न्यूमरच

2
@LiamNewmarch मैं यह सलाह नहीं दूंगा कि खुद को Android आशुलिपि के रूप में समझ में न आए
शलजम

@ 3rrr404 आह ठीक है, काफी अच्छा है। धन्यवाद!
लियाम न्यूमरच

16

यहां एक समाधान है जिसमें उच्च (एर) डीपीआई ( एमडीपीआई ) डिवाइस शामिल हैं ~ ~ 160 डॉट्स प्रति इंच , जैसे कुछ गैर-आईओएस डिवाइस (fe: Google Nexus 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;
       }

}

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

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


1
प्रत्येक आयाम की एक छवि 2x में बिल्कुल 4x पिक्सेल होते हैं (जैसे, सैद्धांतिक रूप से आकार में 4x होने की उम्मीद की जा सकती है), जबकि 1.325 * 1.325 पिक्सेल में केवल 1.755625 वृद्धि का समर्थन करता है। मुझे लगता है कि 1.325dppi के साथ छवि की गुणवत्ता किसी भी तरह से खो जाएगी, लेकिन अगर आप HiDPI जाते हैं, तो क्लाइंट को बस पेज लोड के लिए अधिक समय तक इंतजार करना होगा, छवि को आकार देने में अधिक बिजली की खपत होगी (और Nexus 7 टेबल काफी हैं यादृच्छिक रिबूट के लिए जाना जाता है), और अधिक बैंडविड्थ का उपभोग करते हैं। इसलिए, मैं @2xकेवल 2dppxग्राहकों के साथ काम करने की सलाह दूंगा ।
cnst

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% तक स्प्राइट आइकन की स्केलिंग और स्थिति, आप अपेक्षित परिणाम प्राप्त कर सकते हैं।


रयान बेन्शे द्वारा एक और आसान SCSS मिक्सिन समाधान ।

/****************************
 HIGH PPI DISPLAY BACKGROUNDS
*****************************/

@mixin background-2x($path, $ext: "png", $w: auto, $h: auto, $pos: left top, $repeat: no-repeat) {

  $at1x_path: "#{$path}.#{$ext}";
  $at2x_path: "#{$path}@2x.#{$ext}";

  background-image: url("#{$at1x_path}");
  background-size: $w $h;
  background-position: $pos;
  background-repeat: $repeat;

  @media all and (-webkit-min-device-pixel-ratio : 1.5),
  all and (-o-min-device-pixel-ratio: 3/2),
  all and (min--moz-device-pixel-ratio: 1.5),
  all and (min-device-pixel-ratio: 1.5) {
    background-image: url("#{$at2x_path}"); 
  }
}

div.background {
  @include background-2x( 'path/to/image', 'jpg', 100px, 100px, center center, repeat-x );
}

उपरोक्त मिक्सिन के बारे में अधिक जानकारी के लिए यहां पढ़ें

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.