如何在图像背景上固定按钮，并在调整大小时将其保留在那里？

Question

我想要实现的是在我的网站上的人脸上添加标签。我知道图像映射属性，但问题是主要 Div 的背景必须设置为 'cover'。但是当 window 调整大小时，按钮的坐标保持不变，所以面部当然会变小，而按钮会覆盖错误的人。

我试图找到一种方法，但没有想到如何完成它。谢谢！

示例代码：

    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();
    });

Answer 1

只需以百分比形式设置坐标即可。

如何在图像背景上固定按钮，并在调整大小时将其保留在那里？

How to fix a button on an image background, and to keep it there upon resize?

jquery

html

css

tags

imagemap