html - 用纯CSS显示视网膜显示图像

Question

我有一种情况，我不可能知道图像的尺寸(专有的有限 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，但为像素比至少为 2 的浏览器显示 logo2x.png。

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

你也可以使用这个 ‘adaptive images’ 解决方案并阅读有关 adaptive images saga 的信息 在 html5doctor 上

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