对图像的响应点

Question

I have to build a map of a shopping maal, which will be responsive.

This looks like this on big screen :

And it looks like this when I reduce the size of my window :

So as you can see the points moves .. Which is not good.

Here is my 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>

And here is the css I'm using :

#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 -->

I tried to use % but it's worse it moves a every pixel the window is reduced. Here it only moves when the window is reduced at the max.

The fiddle : http://jsfiddle.net/vqy8kq2f/

Answer 1

You can use percentages if you add to your CSS #plan-boutiques { display: inline-block; position: relative; } #plan-boutiques { display: inline-block; position: relative; } #plan-boutiques { display: inline-block; position: relative; } .

Here is your fiddle with my modifications.

Answer 2

Just remove width: 100% from #plan-boutiques > img

FIDDLE

EDIT

So i added some jQuery to calculate exact location of the dots and recalculate it if the image gets smaller than the mentioned size

FIDDLE

ps: you will have to click run every time you resize the box. Also you can add $(window).resize() function if you want a real time response.