Сбивается позиция меток
 

Добрый день.

Подскажите плз. как установить позиционирование в разных устройствах. (что бы метки отображались в одних и тех же точках на изображении)

<style>
#point_mr {
		font-size: 30pt;
	    width: 50px;
	    height: 50px;
	    line-height: 45px;
	    cursor: pointer;
	    left: 80%;
	    color: #ffffff;
	    top: 32%;
	    position: absolute;
	    border-radius: 50%;
	    border: 3px solid #ffffff;
	}

  	#content {
		width:100%;
		height:100%;
	}

</style>

<div id="content" >	
  <!--Изображение-->
<img style="margin: 0px auto;position: absolute;top: 60px;bottom: -100%;left: -100%;right: -100%;min-width: 100%;min-height: auto;	" src="/sites/ds/IS/SitePages/SKKMRIA/img/123.PNG" class="img-responsive"/>
				
 <!--Метки-->
	<div id="metka">
  	<a id="map1" href="#animatedModal">		
      <i id="point_mr" class="fa fa-map-marker hover" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="" data-original-title="Метка 1"></i>
    </a>
    </div>
		
</div>

Castromen,
https://javascript.ru/forum/jquery/4...tml#post308163

рони,
Спасибо. Но если img во весь экран, не фиксированный как в примере?
#resizable{
width:550px;
height:330px;
margin: 0% auto;
}

Как мне определять какой размер экрана?15", 17" все съезжает.