Zeige Retina-Display Bild mit reinem css

Question

ich eine Situation, wo ich nicht möglicherweise die Abmessungen eines Bildes (ein proprietäres begrenzt cms ...)

ich brauche, um herauszufinden, wie eine Netzhaut-Ebene zu zeigen, wissen kann, Bild, und ich möchte dies tun, ohne Javascript (wenn möglich) zu verwenden.

Ich habe mit:

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

aber nur hat mich mit Elementen geholfen, die Hintergrundbildern haben. Da das fragliche Bild kein Hintergrundbild sein kann (da ich die Größe nicht kenne ...), kann man das herausfinden?

Ich habe logo.png und logo2x.png, und mein anwendbar Markup sieht ungefähr so ​​aus:

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

Ist dies möglich, ohne Javascript? Ich bin nicht dagegen, Nicht-Standard-CSS zu verwenden - solange es mit Webkit funktioniert (in diesem Fall ios/iphone). Ich mag logo.png für normalen Browser angezeigt werden, aber logo2x.png für Browser mit einem Pixelverhältnis von mindestens 2

Answer 1

Sie diesen Trick tun können: Ausgabe aller Bilder und zeige nur relevante Bilder für jedes Gerät:

HTML-Markup :

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

CSS-Stile:

.logo_retina { display: none; } 

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

Sie können auch diese ‘adaptive images’ Lösung verwenden und über adaptive images saga auf html5doctor

UPDATE lesen:dabblet link

HTML:

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

CSS:

#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'); 
    } 
} 

Answer 2

Nachdem dachte zu diesem Thema selbst - wie etwa nur die x2 Bild verwenden und sicherstellen, dass das Bild der Pixelmaße einstellen? Retina-Displays zeigen es 1: 1, und nicht-Retina-Displays wird es bei 50% zeigen. Alle Clients müssen jedoch die x2-Version laden, was mehr Verkehr bedeutet.