immagine del display retina con puro css

Question

Visualizzazione Ho una situazione in cui non riesco forse conoscere le dimensioni di un'immagine (un CMS proprietario limitate ...)

ho bisogno di capire come mostrare un livello della retina immagine, e voglio farlo senza usare javascript (se possibile).

ho usato:

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

ma che solo mi ha aiutato con elementi che hanno le immagini di sfondo. Dal momento che l'immagine in questione non può essere un'immagine di sfondo (dato che non conosco la dimensione ...) che modo è di capire?

ho logo.png e logo2x.png, e il mio margine di profitto del caso sembra qualcosa di simile:

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

Questo è possibile senza javascript? Non sono contro l'uso di css non standard per questo - a patto che funzioni con il webkit (ios/iphone in questo caso). Voglio visualizzare logo.png per i browser normali, ma logo2x.png per browser con un rapporto di pixel di almeno 2.

Answer 1

È possibile fare questo trucco: uscita tutte le immagini e mostrare solo immagini relative a ciascun dispositivo: markup

HTML : stili

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

.logo_retina { display: none; } 

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

Inoltre è possibile utilizzare questa soluzione ‘adaptive images’ e leggere su adaptive images saga su html5doctor

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

Dopo aver pensato a questo problema me stesso - come circa semplicemente utilizzando l'immagine x2 e fare in modo di impostare le dimensioni in pixel dell'immagine? Il display Retina lo mostrerà 1: 1 e il display non retina lo mostrerà al 50%. Tutti i client devono caricare la versione x2, il che significa più traffico.