Css 视网膜响应裁剪（hiDPI）图像

我在网页上有一张地图的图片。 使用CSS，浏览器会自动裁剪地图图像。目标是使地图始终保持100%的比例，并以所讨论的位置为中心。其想法是，地图将始终填充页面的宽度，但随着浏览器窗口的缩小，周围区域将被简单地裁剪，但定位销始终可见，并且始终以100%的比例显示

我已经使用div对非视网膜图像进行了很好的处理：

#map {
    width: 100%;
    height: 300px;
    background-image: url('images/map_1.jpg');
    background-position: center;
    background-size: auto;
}

我在视网膜设备上遇到的问题是，它要么是“真”的100%（所以它是两倍大），要么是裁剪的（使用

背景大小：auto；

），要么是全宽的（使用

背景大小：100%；

），这意味着地图特征通常很小

我有一个媒体查询来检测hiDPI设备，但我不知道如何让它保持适当的规模和裁剪/隐藏溢出

---

谢谢

您应该能够在pixelsPerfect中指定背景大小！考虑到我的整个样式表都在使用百分比和ems，我根本没想到这会起作用。谢谢