示出与纯的CSS视网膜显示图像(Showing retina display image with

我有一个情况我不可能知道的图像的尺寸（专有限制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的像素比例的浏览器。

Answer 1:

你可以这样做伎俩：输出所有图像，并显示仅提供相关图片到每个设备：

HTML标记：

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

你也可以使用这个“自适应图像”解决方案，并了解自适应影像传奇的html5doctor

UPDATE： dabblet链接

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