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’ 解决方案，并在html5doctor上阅读 adaptive images saga

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

Answer 2

自己考虑过这个问题 - 如何使用x2图像并确保设置图像的像素尺寸？ Retina显示屏将以1：1显示，非视网膜显示屏将显示50％。所有客户端都必须加载x2版本，这意味着更多的流量。

用纯css显示视网膜显示图像

2 个答案: