Pokazuje siatkówki wyświetlanego obrazu w czystym CSS

Question

Mam sytuacji, w których nie może wiedzieć, wymiary obrazu (zastrzeżony ograniczone cms ...)

muszę dowiedzieć się, jak pokazują poziom siatkówki obrazu i chcę to zrobić bez używania javascript (jeśli to możliwe).

Używam:

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

ale tylko pomógł mi z elementów, które mają obrazy tła. Ponieważ obraz, o którym mowa, nie może być obrazem tła (ponieważ nie znam rozmiaru ...), jaki jest sposób na ustalenie tego?

mam logo.png i logo2x.png, a mój zastosowanie znaczników wygląda mniej więcej tak:

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

Czy jest to możliwe bez JavaScript? Nie jestem przeciwny używaniu tego niestandardowego css - o ile działa z webkitem (w tym przypadku ios/iphone). Chcę, aby wyświetlić logo.png dla normalnych przeglądarek ale logo2x.png dla przeglądarek z proporcji piksela przynajmniej 2.

Answer 1

Można zrobić ten trick: wyjście wszystkich zdjęć i pokazać tylko odpowiednie obrazy do każdego urządzenia:

znaczników HTML style:

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

Ponadto można skorzystać z tej ‘adaptive images’ rozwiązanie i przeczytać o adaptive images saga na 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

Po myślał o tym problemie myself - jak o tylko przy użyciu x2 obraz i upewniając się, aby ustawić wymiary pikseli obrazka? Wyświetlacze Retina pokażą ją 1: 1, a wyświetlacze nie-siatkówkowe pokażą ją na 50%. Wszyscy klienci muszą jednak załadować wersję x2, co oznacza większy ruch.