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

Question

我有一个带有背景图像的容器。我还有一些 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>

这是 demo给你这个想法。但是在调整实际浏览器窗口大小时， map 上的点移动得更多。我可以将图像添加为 img 元素，然后将点放在它上面，但我想要的只是将我的点放在特定位置并在所有大小的容器中具有相同的外观。关于如何执行此操作的任何想法？

Answer 1

所以我会提出一个答案，让我们看看它的说服力如何。

这FIDDLE具有以下内容:

1. 特定大小的 div。
2. 与 div 大小相同的 map 背景图片
3. 第一个 div 内的第二个 div(标记)
4. 标记的位置调整了 % - 就在 Piazza del Popolo 上

HTML

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

CSS

.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%;
}

所以关键是一个容器中的“固定” map ，以及一个相对调整的标记。