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

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

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

我一直在用：

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

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

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

logo">
  

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

最佳答案

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

HTML标记：

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：

logo ir" href="/">BRAND

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

原文地址：https://www.jb51.cc/html/425850.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。