用纯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普通浏览器,但logo2x.png对于像素比率至少为2的浏览器.

Answer 1

您可以执行此技巧：输出所有图像并仅向每个设备显示相关图像：

\n\n

HTML 标记：

\n\n

<h1 id="logo">\n  <a href="/">\n    <img class="logo logo_normal" src="images/logo.png" />\n    <img class="logo logo_retina" src="images/logo2x.png" />\n  </a>\n</h1>\n

\n\n

CSS 样式：

\n\n

.logo_retina { display: none; }\n\n@media only screen and (-webkit-min-device-pixel-ratio: 2) {\n    .logo_normal { display: none; }\n    .logo_retina { display: block; }\n}\n

\n\n

您也可以使用此\xe2\x80\x98adaptive images\xe2\x80\x99解决方案并阅读html5doctor 上的自适应图像传奇

\n\n

更新： dabblet 链接

\n\n

HTML：

\n\n

<h1><a class="logo ir" href="/">BRAND</a></h1>\n

\n\n

CSS：

\n\n

#logo a {\n    display: block;\n    width: 200px;\n    height: 200px;\n    background: url(\'//placekitten.com/200\');\n}\n\n@media  (-webkit-min-device-pixel-ratio:1.5),\n        (min--moz-device-pixel-ratio:1.5),\n        (-o-min-device-pixel-ratio:3/2),\n        (min-resolution:1.5dppx) {\n    #logo a {\n        background: url(\'//placekitten.com/400\');\n    }\n}\n

\n