Mostrando imagem de exibição retina com css puro
Eu tenho uma situação onde eu não posso saber as dimensões de uma imagem (um proprietário limitado cms ...)
Eu preciso descobrir como mostrar uma imagem de nível de retina e quero fazê-lo sem usar o javascript (se possível).
Eu tenho usado:
@media only screen and (-webkit-min-device-pixel-ratio: 2) {}
mas isso só me ajudou com elementos que possuem imagens de fundo. Como a imagem em questão não pode ser uma imagem de fundo (já que não sei o tamanho ...), qual é a maneira de descobrir isso?
eu tenhologo.png
elogo2x.png
e minha marcação aplicável é algo como:
<h1 id="logo">
<a href="/">
<img src="images/logo.png">
</a>
</h1>
Isso é possível sem o javascript? Eu não sou contra o uso de CSS não-padrão para isso - contanto que ele funcione com o webkit (ios / iphone, neste caso). Eu quero mostrarlogo.png
para navegadores normais, maslogo2x.png
para navegadores com uma taxa de pixels de pelo menos 2.