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

前端之家收集整理的这篇文章主要介绍了html – 用纯css显示视网膜显示图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有一种情况,我不可能知道图像的尺寸(专有的有限的cms ……)

我需要弄清楚如何显示视网膜水平图像,我想这样做而不使用javascript(如果可能的话).

我一直在用:

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

但这只能帮助我使用具有背景图像的元素.由于有问题的图像不能是背景图像(因为我不知道尺寸……)有什么方法可以解决这个问题?

我有logo.png和logo2x.png,我的适用标记看起来像:

  1. logo">

这可能没有JavaScript吗?我并不反对使用非标准的CSS – 只要它适用于webkit(在这种情况下是ios / iphone).我想为普通浏览器显示logo.png,对于像素比率至少为2的浏览器,我想显示logo2x.png.

最佳答案
您可以执行此操作:输出所有图像并仅向每个设备显示相关图像:

HTML标记:

CSS样式:

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

您也可以使用此‘adaptive images’解决方案,并阅读html5doctor上的adaptive images saga

更新:dabblet link

HTML:

  1. logo ir" href="/">BRAND

CSS:

  1. #logo a {
  2. display: block;
  3. width: 200px;
  4. height: 200px;
  5. background: url('//placekitten.com/200');
  6. }
  7. @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) {
  8. #logo a {
  9. background: url('//placekitten.com/400');
  10. }
  11. }

猜你在找的HTML相关文章