imagen de la pantalla retina con css puro

Question

Mostrando Tengo una situación en la que no me es posible conocer las dimensiones de una imagen (una propiedad cms limitados ...)

tengo que encontrar la manera de mostrar un nivel retina imagen, y quiero hacerlo sin usar javascript (si es posible).

He estado usando:

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

pero que sólo me ha ayudado con elementos que tienen las imágenes de fondo. Dado que la imagen en cuestión no puede ser una imagen de fondo (ya que no conozco el tamaño ...) ¿cuál es una forma de resolver esto?

tengo logo.png y logo2x.png, y mi margen de beneficio aplicable se ve algo como:

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

Es esto posible sin javascript? No estoy en contra de utilizar css no estándar para esto, siempre que funcione con webkit (ios/iphone en este caso). Quiero mostrar logo.png para los navegadores normales, pero logo2x.png para los navegadores con una proporción de píxeles de al menos 2.

Answer 1

Usted puede hacer este truco: la salida de todas las imágenes y mostrar únicamente imágenes relevantes para cada dispositivo: marcado

HTML estilos:

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

También se puede usar esta solución ‘adaptive images’ y leer sobre adaptive images saga en html5doctor

ACTUALIZACIÓN: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

Después de haber reflexionado sobre este tema a mí mismo - ¿qué hay simplemente usando la imagen x2 y asegurarse de establecer las dimensiones en píxeles de la imagen? Las pantallas Retina lo mostrarán 1: 1, y las pantallas que no sean retina lo mostrarán al 50%. Todos los clientes tienen que cargar la versión x2, lo que significa más tráfico.