使地圖響應

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