0

我在网页上有一张地图的图像。使用 CSS，地图图像由浏览器自动裁剪。目标是地图始终为 100% 比例，并且以相关位置为中心。这个想法是地图将始终填满页面的宽度，但是随着浏览器窗口的大小缩小，周围区域被简单地裁剪，但位置图钉始终可见，并且始终处于 100% 比例。

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

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

我在使用 Retina 设备时遇到的问题是它要么是“真实”100%（所以它是原来的两倍）并且被裁剪（使用background-size: auto;），或者是全宽（使用background-size: 100%;），这意味着地图特征通常很小.

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

谢谢

4

0 回答 0