5

我有一种情况，我不可能知道图像的尺寸（专有的有限 cms ...）

我需要弄清楚如何显示视网膜级别的图像，并且我想在不使用 javascript 的情况下这样做（如果可能的话）。

我一直在使用：

@media only screen and (-webkit-min-device-pixel-ratio: 2) {}

但这只会帮助我处理具有背景图像的元素。由于有问题的图像不能是背景图像（因为我不知道大小......）有什么方法可以解决这个问题？

我有logo.pngand logo2x.png，我的适用标记看起来像：

<h1 id="logo">
  <a href="/">
    <img src="images/logo.png">
  </a>
</h1>

没有javascript这可能吗？我不反对为此使用非标准 css - 只要它适用于 webkit（在这种情况下为 ios/iphone）。我想logo.png为普通浏览器显示，但logo2x.png对于像素比至少为 2 的浏览器。

4

2 回答 2

3

您可以做到这一点：输出所有图像并仅向每个设备显示相关图像：

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

您也可以使用此“自适应图像”</a>解决方案并阅读html5doctor 上的自适应图像传奇

更新： 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');
    }
}
于 2012-06-09T05:40:31.927 回答
1

自己考虑过这个问题 - 只使用 x2 图像并确保设置图像的像素尺寸怎么样？Retina 显示器会以 1:1 的比例显示，非 Retina 显示器会以 50% 的比例显示。但是，所有客户端都必须加载 x​​2 版本，这意味着更多的流量。

于 2012-08-25T17:57:22.537 回答