Question

我把我正在谈论的内容简单地拼凑起来：https://jsfiddle.net/4zokey2f/1/。

请注意，如果拖动浏览器的一角，图像会改变大小，但是当图像调整大小时，跨度（帐篷上的红色框）不会停留在帐篷上方。值得注意的是，在我的问题中，我将内联的x和y值传递为your_function（它是反应组件，因此它们只存储在本地状态）。

我有原始图像尺寸，初始x和y是从中计算的，我只是不知道用图像调整大小来缩放它们的正确方法吗？

谢谢！

Answer 1

在我参与朋友的学校项目之前，我遇到了同样的问题。我所做的是将两个元素的background-position（垂直和水平）居中，就像你的figure＆amp; span。一旦两者都居中，我就会使用vw＆amp; vh调整消息框。你也可以查看这个更新的小提琴https://jsfiddle.net/4zokey2f/2/，我添加min-width＆amp;持有人/容器上的max-width，只是为了增加一些界限或限制。希望这会有所帮助。

Answer 2

我可能会尝试使用canvas或svg等内容来动态生成图片。

画布示例：

<img id="parados" 
src="http://www.thatdrop.com/wp-content/uploads/2017/03/parados-700x694.jpg" 
alt="The Scream" style="display: none">

<canvas id="myCanvas" width="700" height="694"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
  window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("parados");
    ctx.drawImage(img,0,0);
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(650,500,50,50);
    ctx.fillStyle = "black";
    ctx.font = "30px Arial";
    ctx.fillText("1",660,540);
  };
</script>

<style>
   canvas {
      width: 100%
   }
</style>

jsfiddle：https://jsfiddle.net/PantsStatusZero/2g612hLn/1/

当图像调整大小时，如何在图像上缩放跨度的x和y坐标？

2 个答案: