Отображение изображения на дисплее сетчатки с помощью чистого 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.