My goal is to add tags to people's faces on my website. While I am aware of the image map property, I am facing an issue where the background of the main Div needs to be set to 'cover'. However, when the window is resized, the coordinates of the tags remain the same, causing the faces to appear smaller and the tags to cover the wrong individuals.
I have been searching for a solution to this problem, but have not been able to find a suitable method. Any suggestions would be greatly appreciated!
Here is a snippet of the sample code I have been working on:
var box1Top = 200;
var box1Left = 400;
var oldWindowWidth = $('body').width();
var oldWindowHeight = $('body').height();
$(window).resize(function() {
var newWindowWidth = $(window).width();
var newWindowHeight = $(window).height();
box1Left = newWindowWidth * 400 / oldWindowWidth;
box1Top = newWindowHeight * 200 / oldWindowHeight;
$('#box').css({left: box1Left, top: box1Top});
console.log(box1Left + "w" + newWindowWidth);
// location.reload();
});