शुद्ध सीएसएस

साथ रेटिना प्रदर्शन छवि दिखा मैं एक स्थिति है जहाँ मैं संभवतः एक छवि के आयाम (एक मालिकाना सीमित सेमी ...)शुद्ध सीएसएस

मैं यह पता लगाने की कैसे एक रेटिना स्तर दिखाने की जरूरत है पता नहीं कर सकते हैं छवि, और मैं जावास्क्रिप्ट (यदि संभव हो) का उपयोग किए बिना ऐसा करना चाहता हूं।

मैं उपयोग कर रहे हैं:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {}

लेकिन यह है कि केवल मुझे तत्वों पृष्ठभूमि छवियों है कि साथ में मदद मिली है। चूंकि प्रश्न में छवि पृष्ठभूमि छवि नहीं हो सकती है (क्योंकि मुझे आकार पता नहीं है ...) इसे समझने का एक तरीका क्या है?

मैं logo.png है और logo2x.png, और मेरे लागू मार्कअप तरह दिखता है:

<h1 id="logo"> 
    <a href="/"> 
    <img src="images/logo.png"> 
    </a> 
</h1>

जावास्क्रिप्ट के बिना यह संभव है? मैं इसके लिए गैर-मानक सीएसएस का उपयोग करने के खिलाफ नहीं हूं - जब तक यह वेबकिट (इस मामले में आईओएस/आईफोन) के साथ काम करता है। मैं कम से कम 2

स्रोत

2012-06-09 Matthew

के एक पिक्सेल अनुपात आप इस चाल कर सकते हैं के साथ ब्राउज़र के लिए सामान्य ब्राउज़र के लिए logo.png लेकिन logo2x.png प्रदर्शित करना चाहते हैं: उत्पादन सभी छवियों और प्रत्येक डिवाइस के लिए केवल प्रासंगिक छवियां दिखाने:

HTML मार्कअप :

<h1 id="logo"> 
    <a href="/"> 
    <img class="logo logo_normal" src="images/logo.png" /> 
    <img class="logo logo_retina" src="images/logo2x.png" /> 
    </a> 
</h1>

सीएसएस शैलियों:

.logo_retina { display: none; } 

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    .logo_normal { display: none; } 
    .logo_retina { display: block; } 
}

इसके अलावा आप इस ‘adaptive images’ समाधान का उपयोग करें और के बारे में adaptive images saga html5doctor पर

अद्यतन पढ़ सकते हैं:dabblet link

HTML:

<h1><a class="logo ir" href="/">BRAND</a></h1>

सीएसएस:

#logo a { 
    display: block; 
    width: 200px; 
    height: 200px; 
    background: url('//placekitten.com/200'); 
} 

@media (-webkit-min-device-pixel-ratio:1.5), 
     (min--moz-device-pixel-ratio:1.5), 
     (-o-min-device-pixel-ratio:3/2), 
     (min-resolution:1.5dppx) { 
    #logo a { 
     background: url('//placekitten.com/400'); 
    } 
}

स्रोत

2012-06-09 05:40:31

इसके साथ समस्या यह है कि 'logo2x.png' घनत्व से दो बार प्रदर्शित नहीं होता है, यह बहुत बड़ा है। यह अभी भी 'logo.png' के रूप में "अस्पष्ट" है। कुछ बिंदु पर, मुझे लगता है कि रेटिना छवि को 50% इसकी चौड़ाई और ऊंचाई या कुछ बनाया जाना चाहिए। – Matthew

इस दृष्टिकोण के साथ एक बड़ा प्रॉपल्म यह है कि वास्तव में दोनों छवियों को लोड किया जाएगा! 'डिस्प्ले: कोई भी छवि लोड होने से नहीं रोकता है, यह सिर्फ प्रदर्शित नहीं होगा ... – Helmut

हाँ, दोनों छवियों को लोड करता है ... बैंडविड्थ के लिए भयानक। –

इस मुद्दे अपने आप के बारे में सोचा करने के बाद - कैसे सिर्फ x2 छवि का उपयोग और छवि के पिक्सेल आयाम स्थापित करने के लिए सुनिश्चित करने के बारे में क्या? रेटिना डिस्प्ले इसे 1: 1 दिखाएंगे, और गैर-रेटिना डिस्प्ले इसे 50% पर दिखाएंगे। सभी क्लाइंटों को x2 संस्करण लोड करना होगा, यानी अधिक ट्रैफ़िक का अर्थ है।

स्रोत

2012-08-25 17:57:22 manmal

शुद्ध सीएसएस

उत्तर

संबंधित मुद्दे