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

Question

我在网页上有一张地图图片。 使用CSS，浏览器会自动裁剪地图图像。目标是地图始终处于100％的比例，并以所涉及的位置为中心。想法是地图将始终填充页面的宽度，但随着浏览器窗口的大小缩小，周围区域被简单地裁剪，但位置引脚始终可见，并且始终以100％的比例。

使用div可以使用非视网膜图像正常工作：

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

我对视网膜设备的问题是它要么是“真实”100％（所以它是两倍大）并且被裁剪（使用background-size: auto;），或者全宽（使用{{ 1}}），这意味着地图特征通常很小。

我有一个媒体查询来检测hiDPI设备，但我无法弄清楚如何让它保持适当的比例并裁剪/隐藏溢出。

感谢