如何响应地将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>

以下是该项目的链接：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%);