Google Chrome将视网膜图像显示为css背景图像，而不是非视网膜图像
Google Chrome将视网膜图像显示为css背景图像，而不是非视网膜图像
提问于 2017-03-03 02:42:12
使用最新的Google Chrome时，Chrome会将视网膜图像加载到非视网膜显示器上。当我在Safari中测试时，Safari将加载非视网膜图像。Chrome是否使用了不同的前缀？我似乎找不到有关如何修复此问题的信息。
CSS：
.background-image {
background-image: url(../image.png);
background-size: 200px 200px;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ration: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
.background-image {
background-image: url(../image-hi-res.png);
background-size: 400px 400px;
}
}下面是一个用JSFiddle编写的示例：https://jsfiddle.net/g52usso0/1/
非retina机器上的Chrome正在加载400x400版本，非retina Safari则加载200x200版本。
回答 1
Stack Overflow用户
发布于 2017-03-03 03:16:18
试试更像这样的东西。你不想在你的高分辨率版本中添加更大的背景尺寸。它应该“缩放”到你的原始背景尺寸：
.background-image {
background: url(../image.png) no-repeat;
background-size: 200px 200px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.background-image {
background: url(../image-hi-res.png) no-repeat;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42563398
复制相关文章
相似问题
腾讯云开发者
