使地图响应

Question

我目前正在呈现一个Joomla网站响应。但是我遇到了SobiPro地图的问题。我正在显示一张地图（背景图片），并在绝对位置上显示一个地图（一个链接+ img），所以如果你缩小地图的大小，它就不适合了。

下面是HTML & CSS - >

<div id="system"> 
    <article class="item"> 
     <div class="content clearfix"> 
     <div id="plan-boutiques"> 
      <a href="#" id="repere-dia" style="" data-lightbox="width:600;type:iframe;">18</a> 
      <!-- 31 links like this^--> 
     </div> 
     </div> 
    </article> 
</div> 

CSS：

#plan-boutiques { 
    background: url(../images/rom/niveau.png) no-repeat; 
    position: relative; 
    display: block; 
    height: 374px; 
    width: 685px; 
    margin: 0 auto; 
    z-index: 1; 
} 

和ID被加到每个点（总共31）是这样的：

a#repere-dia { 
    left: 391px; 
    top: 182px; 
} 

我已经尝试过逐像素移动，但有30分，这不是正确的解决方案，所以我正在寻找一些jQuery或Javascript解决方案。

编辑

新问题，后台集中住宿，即使我缩小窗口。

Answer 1

使用百分比定位，而不是在你的CSS像素。

a#repere-dia { 
    left: 10.43%; 
    top: 27.02%; 
} 

Answer 2

试试这个，

#plan-boutiques { 
background: url(../images/rom/niveau.png) no-repeat; 
position: relative; 
display: block; 
height: auto; 
width: 100%; 
margin: 0 auto; 
z-index: 1; 
}