如何响应式地将 HTML 元素绑定到图像映射？

Question

现在我有一张包含我们一些员工的背景图片。目标是当用户将鼠标悬停在图像中的一个人上方时显示文本气泡。目前我们正在使用图像映射在工作人员上方创建可点击区域。

在正常桌面大小的页面加载中，这工作正常，但当我们更改页面大小时，对话气泡会漂移并且不会与相应的图像映射区域对齐。理想情况下，当工作人员变大或变小时，对话泡泡会与他们的脸对齐。

这是一个简化的代码片段，可以让您了解我们的页面结构：

<div class="container-image-map">
    <img class="holiday-card" src="Xmas_Card.jpg" alt="" width="2400" height="1500" usemap="#holidaycard"/>
    <map name="holidaycard">
        <area shape="poly" coords="1235,408,1232,433,1024,431,1045,374,1100,342,1083,207,1222,212,1267,309,1292,321,1316,384"  data-person="dave" alt="Dave">
    </map>
    <div class="shape shape-dave" id="dave">
        <div class="speech-bubble">
            <h2 class="person-name">Dave</h2>
            <p class="person-copy">Speech bubble text</p>
        </div>
    </div>
</div>

这里是项目的link：http://holidaycard.dhxadv.com/

Answer 1

如果您以百分比设置位置，那么您希望对气泡大小使用相同的百分比。应该是这样的：

.shape.shape-mackenzie
{
    left: 58%;
    top: 26%;
    width: 17%;
    height: 20%;
}

不要忘记删除您的 min-width 和 max-width 属性。另请注意，此方法无法帮助您进行文本缩放，为此您必须切换到 SVG 或使用媒体查询。

Answer 2

实际上还有另一种使用视口值的方法：vh、vw。您最感兴趣的是 vw（视口宽度），因为它正在发生变化。

所以理论上它可以变成这样：

transform: translate(calc(50vw + 50%), calc(50vw - 160%));
top: 0;
left: 0;

不幸的是，您必须自己计算数学才能使它真正起作用。

这是我能想到的最好的：

left: calc(19vw + 50%);
top: calc(-9vw + 50%);
transform: translate(-50%, -50%);

如何响应式地将 HTML 元素绑定到图像映射？

How to responsively tie an HTML element to an image map?

html

css

imagemap