За зафиксировать метки на адаптивной картинке?

/*--Было--*/
.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>