以百分比计算图像上点的位置

【问题标题】：calculate position of a point on image in percentage以百分比计算图像上点的位置
【发布时间】：2016-01-31 07:31:49
【问题描述】：

我正在使用以下公式以像素为单位计算图像上某个点的位置，其中 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();

现在，我想以百分比计算相同位置，以便该点保持响应。（对不起，我数学有点弱，所以需要帮助）

【问题讨论】：

标签： css coordinates responsiveness jquery-calculation

【解决方案1】：

获得绝对偏移量后，只需除以总宽度或高度（乘以 100 即可得到百分比）。

这是一个例子，改编自this answer。

$(".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>

【讨论】：