Question

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

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

这是一个简化的代码片段，用于了解我们的页面结构：

<Configuration_item Key="foo" Value="bar"/>
<Configuration_item Key="students_names" Value="Toddy;Todd;Marry;Alen;Donald"/>
<Configuration_item Key="foo2" Value="baz/>

以下是该项目的链接：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元素绑定到图像映射？

2 个答案: