对图像的响应点

Question

我必须建立一个购物邮箱的地图，这将是响应。

在大屏幕上看起来像这样：

当我缩小窗口大小时看起来像这样：

所以你可以看到这些点移动..哪个不好。

这是我的HTML：

<div class="container">
  <div id="plan-boutiques"><img src=IMG></img>
    <a href="" id="first_element"><p></p></a>
    <a href="" id="second_element"><p></p></a>
    <a href="" id="third_element"><p></p></a> <!-- There will be 30 elements at the end -->
  </div>
</div>

这是我正在使用的CSS：

#plan-boutiques > img {
  width: 100%;
  height: auto;
  max-width: 685px;
  max-height: 374px;
 }
.container {
  width:100%; 
  margin:0 auto;
}

 #plan-boutiques a {
  background-color: red;
  border-radius: 100px;
  background-repeat: no-repeat;
  display:block;
  height:10px;
  width:10px;
  position:absolute;
  line-height: 25px;
  color:#fff;
  text-align:center;
  font-size:1px;
  background-position: 0 -27px;
 }

#plan-boutiques a:hover {
  background-position: 0 0;
}  
a#first_element {
  margin-left: 20px;
  margin-top: -30px;
}
<!-- other element have differents margin -->

我尝试使用％但是更糟糕的是它移动窗口减少的每个像素。这里只有当窗口减少到最大值时才会移动

小提琴：http://jsfiddle.net/vqy8kq2f/

Answer 1

如果您添加到CSS #plan-boutiques { display: inline-block; position: relative; }，则可以使用百分比。

Here is your fiddle我的修改。

Answer 2

只需从width: 100%

中删除#plan-boutiques > img即可

FIDDLE

修改

所以我添加了一些jQuery来计算点的确切位置，如果图像小于上述尺寸，则重新计算

FIDDLE

ps：每次调整框大小时都必须单击运行。如果您想要实时响应，也可以添加$(window).resize()功能。