Css 如何使div与背景的精确点匹配？

我有一个有背景图像的容器。我也有一些div指向相对于背景的确切位置。我可以使用左上属性来实现这一点。但问题是容器的宽度为60%，最小宽度为500px。调整浏览器窗口的大小会弄乱div的位置

这是我的密码：

CSS

.container{
    width:60%;
    height:550px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-275px 0 0 -30%;
    min-width:500px;
    border: rgba(255,255,255,0.2) solid 1px;

}
.main-content{
    float:left;
    width:100%;
    height:100%;
    position:absolute;
    background:url(../img/map.png) no-repeat center center;
    background-size:90% auto;
    background-mi
}

.loc1-point{
    height:20px;
    width:20px;
    position:absolute;
    left:18.5%;
    top:14.5%;
    background-color:red;
    border-radius:50%;
}

HTML

<div class="container">
    <div class="main-content">
         <div class="loc1-point"></div>
    </div>
</div>

下面是给你的想法。但在重新调整实际浏览器窗口的大小时，地图上的点会移动得更多。 我可以将图像添加为img元素，然后将点放在其上，但我只希望在某些位置上有点，并且在所有大小的容器中都有相同的外观。

---

你知道怎么做吗？

所以我会提出一个答案，让我们看看它有多令人信服

这有以下几点：

一种特殊尺寸的div

与div大小相同的地图背景图像

第一个div内的第二个div（标记）

在波波罗广场上，标志牌的位置向右调整了%

HTML

---

因此，关键是容器中的“固定”贴图和相对调整的标记。

为什么不将该点放在图像本身上（使用图像编辑器）？或者使用谷歌地图api@jonasnas我不能通过图像编辑器将其放在图像上，因为每个点都会对jquery产生一些影响，而且在单击每个点后还会添加更多的内容，如lightbox等等。这只是一个简化版本。将图像放在一个div中（或将其作为背景），用position:absolute设置div的样式。用绝对位置和左上角在地图上你想要的位置做第二次俯冲。它将“固定”在地图上。这是波波罗广场上一把有红点的小提琴@谢谢你的帮助。但关键是我想要图像（地图）宽度的百分比，这样它的大小在更小的屏幕上会减小。因此，该点也必须相应地改变其位置。在这种情况下，顶部/左侧的工作百分比不会改变吗？谢谢您的帮助。但是以地图为背景的第一个div没有百分比大小。所以在任何屏幕上，它的大小都是500px X 400X。但是我希望它是百分比，比如60%，所以在一个更大的屏幕上，地图会比一个非常小的屏幕大。在这种情况下，标记的位置显示相对变化。

<div class='firstdiv'>
<div class='seconddiv'></div>
</div>

.firstdiv {
    background: url(http://www.centralromehotels.net/map/rome_map.jpg);
    background-size: 500px 400px;
    width: 500px;
    height: 400px;
}
.seconddiv {
    width:            10px;
    height:           10px;
    background-color: red;
    position:         relative;
    top:              11%;
    left:             47%;
}