Рассчитать положение точки на изображении в процентах

Question

Я вычисляю положение точки на изображении по формуле ниже в пикселях, где oW - ширина исходного изображения, а oH - высота исходного изображения.

var x = oW * parseInt(document.getElementById('pageX').value - $tagImage.offset().left - 5) / $tagImage.width();

var y = oH * parseInt(document.getElementById('pageY').value - $tagImage.offset().top - 5) / $tagImage.height();

Теперь я хочу рассчитать ту же позицию в процентах, чтобы точка оставалась отзывчивой. (Извините, я немного слаб в математике, поэтому нужна помощь)

Answer 1

Получив абсолютные смещения, вы просто делите на общую ширину или высоту (и умножаете на 100, чтобы получить в процентах).

Вот пример, адаптированный из этого ответа.

$(".test").click(function(e){
  var offset = $(this).offset();
  alert('x = ' + ((e.pageX - offset.left) / $(this).outerWidth() * 100) + "%" );
  alert('y = ' + ((e.pageY - offset.top) / $(this).outerHeight() * 100) + "%" );
});

.test {
  width: 200px;
  height: 200px;
  background-color: green;
  margin-left: 50px;
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  </div>
<div>