Javascript Размещает изображение там, где пользователь нажимает ⇐ CSS

[Anonymous]

Я пытаюсь использовать JavaScript для размещения наложения изображения поверх существующего изображения HTML, когда пользователь нажимает на него. У меня эта часть работает, но мне интересно, можно ли изменить положение наложенных изображений при изменении размера окна, чтобы они сохраняли свое положение относительно базового изображения. Я также хотел бы масштабировать вставленные изображения при изменении размера окна. У меня есть небольшой код: https://codepen.io/Matt-Diko/pen/abxLqrR.

Код: Выделить всё

window.addEventListener("load", function () {
document.getElementById('myImg').onclick = function(event) {
var i = new Image();
i.src = 'https://picsum.photos/30/30?grayscale';
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);
}
});

Код: Выделить всё

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

Код: Выделить всё

Map PNG Testing

[img]https://picsum.photos/seed/picsum/200/300[/img]

Подробнее здесь: https://stackoverflow.com/questions/782 ... ser-clicks