Отображение изображения на сетчатке с чистым CSS

У меня есть ситуация, когда я не могу знать размеры изображения (проприетарная ограниченная cms ...)

Мне нужно выяснить, как показать изображение уровня сетчатки, и я хочу сделать это без использования JavaScript (если это возможно).

Я использовал:

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

Возможно ли это без JavaScript? Я не против использования нестандартного css для этого - до тех пор, пока он работает с webkit (в данном случае ios / iphone). Я хочу показатьlogo.png для обычных браузеров, ноlogo2x.png для браузеров с соотношением пикселей не менее 2.

Ответы на вопрос(2)

вывести все изображения и показать только соответствующие изображения для каждого устройства:

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

.logo_retina { display: none; }

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

Также вы можете использовать это& # x2018; адаптивные изображения & # x2019; Решение и читать оадаптивные изображения саги на 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');
    }
}
 16 нояб. 2012 г., 02:10
Да, загружает оба изображения ... ужасно для пропускной способности.
 Matthew09 июн. 2012 г., 15:10
Проблема в том, чтоlogo2x.png не отображается с удвоенной плотностью, он просто больше. Это все еще так же, как «нечеткий» какlogo.png, В какой-то момент, я думаю, что изображение сетчатки должно быть сделано на 50% его ширины & amp; высота или что-то.
 23 нояб. 2012 г., 07:21
@BenjaminAllison Я обновил свой ответ
 06 окт. 2012 г., 14:56
большая проблема с этим подходом состоит в том, что фактически оба изображения будут загружены!display:none не препятствует загрузке изображения, оно просто не будет отображаться ...
 23 нояб. 2012 г., 07:22
@ Матфея я обновил свой ответ

как насчет использования изображения x2 и установки размеров изображения в пикселях? Дисплеи Retina будут показывать 1: 1, а дисплеи без Retina будут показывать 50%. Все клиенты должны загрузить версию x2, что означает увеличение трафика.

Ваш ответ на вопрос