For fixing labels on an adaptive image?

Question

css

Hello. There is an image that proportionally "stretches" depending on the width of the browser. Position: absolute labels are placed at the top. It turns out I can put them down correctly only for a fixed image size, otherwise they move apart. How can you dodge and make sure that they at least approximately remain in their places?

Answer 1

We take the original size of the image, the position and dimensions of the label.
And based on them, we determine what percentage is ...
Well, we put these values ​​in place of the fixed ones.

Well, an example, where without it.

/*--Было--*/
.image{
   width: 800px;
   height: 400px;
}
.metka{
  left: 20px;
  top: 40px;
  width: 10px; 
  height: 10px;
}

/*--Стало--*/
.image{
   width: 100%;
   height: auto;
}
.metka{
  left: 2.5%;
  top: 10%;
  width: 1.25%;
  height: 2.5%;
}

Ну это все предполагает конструкцию:

<div style="position:relative;height:auto;">
   <img class="image">
   <span class="metka"></span>
</div>

Implementation: jsfiddle.net/66o4Lkm8
But how you will translate all this is another question. Here you will need JS.