我有一种情况,我不可能知道图像的尺寸(专有的有限的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’@R_301_463@案,并阅读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');
}
}
