Javascript 将图像放置在用户点击的位置

Question

当用户单击现有的 HTML 图像时，我尝试使用 javascript 将图像叠加层放置在该图像上。我有这部分工作，但我想知道当窗口大小调整时是否可以重新定位叠加图像，以便它们保持相对于基本图像的位置。我还想在调整窗口大小时缩放插入的图像。我这里有一个小代码笔：https://codepen.io/Matt-Denko/pen/abxLqrR。

window.addEventListener("load", function () {
    document.getElementById('myImg').onclick = function(event) {
        var i = new Image();
        i.src = 'img/icon-exclamation-triangle-32.png';
        i.style.position = "absolute";
        var yOffset = event.clientY;
        var xOffset = event.clientX;
        // Apply offsets for CSS margins etc.
        yOffset -= 148;
        xOffset -= 40;
        // Set image insertion coordinates
        i.style.top = yOffset + 'px';
        i.style.left = xOffset + 'px';
        // Append the image to the DOM
        document.getElementById('map1').appendChild(i); 
    }
});

这是 HTML：我将新创建的图像附加到“map1”div。

<div class="container">
    <div style="height: auto; padding: 3px 0 3px 0;">
        <div class="card">
            <div class="card_content">
                <h1>Map PNG Testing</h1>
                <div id="map1" class="responsive">
                    <img src="img/skwh.png" id="myImg" class="responsive">
                </div>
            </div>
        </div>
    </div>
</div>

.responsive {
    position: relative;
    max-width: 1200px;
    width: 100%;
    height: 100%;
}

Answer 1

我认为最好是使用

left

单位设置

top

和

%

。 我也对

width

做了同样的事情。

window.addEventListener("load", function() {
  document.getElementById('map1').onclick = function(event) {
    const rect = event.target.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    addMarker(x, y, rect.width, rect.height);
  }
});


function resize() {
  document.getElementById('map1').style.width = ((Math.random() * 50) + 50) + "%"
}

function addMarker(x, y, w, h) {
  var i = new Image();
  i.src = 'https://i.postimg.cc/7h8KpVyG/icon-exclamation-triangle-32.png';
  i.style.position = "absolute";
  i.onload = function() {
    var yOffset = y;
    var xOffset = x;
    console.log()
    // Apply offsets for CSS margins etc.
    yOffset -= i.height / 2;
    xOffset -= i.width / 2;
    // Set image insertion coordinates
    // i.style.top = yOffset + 'px';
    // i.style.left = xOffset + 'px';
    i.style.top = yOffset / h * 100 + '%';
    i.style.left = xOffset / w * 100 + '%';

    // optionally: 
    i.style.width = i.width / w * 100 + '%'

  }

  // Append the image to the DOM
  document.getElementById('map1').appendChild(i);

}

.responsive {
  position: relative;
  max-width: 1200px;
  width: 100%;
  height: auto;
  border: 1px solid red;
}

.responsive #myImg {
  width: 100%;
}

<div class="container">
  <div style="height: auto; padding: 3px 0 3px 0;">
    <div class="card">
      <div class="card_content">
        <h1>Map PNG Testing <button onclick="resize()">toggle size</button></h1>
        <div id="map1" class="responsive">
          <img src="https://i.postimg.cc/8c4zqZrt/skwh.png" id="myImg">
        </div>
      </div>
    </div>
  </div>
</div>