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

Posted 2023-03-06

【中文标题】用纯 css 显示视网膜显示图像

【英文标题】：Showing retina display image with pure css

【发布时间】：2012-06-13 01:42:59

【问题描述】：

我有一种情况，我不可能知道图像的尺寸（专有的有限 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。

【参考方案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');
    

【讨论】：

这个问题是logo2x.png 没有以两倍的密度显示，它只是更大。它仍然和logo.png 一样“模糊”。在某些时候，我认为视网膜图像需要使其宽度和高度的 50% 或其他东西。

这种方法的一个大问题是实际上两个图像都会被加载！ display:none 不会阻止加载图像，只是不会显示...

是的，加载两个图像...带宽太可怕了。

【参考方案2】：

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