响应图像上的点位置

Question

我需要使用css在一个图像上定位几个点。(see example)

我正在使用下面的代码（点号为1）：

<div id="photo1">
<div class="dot" style="left:calc(50px - 20px); top:calc(553px - 20px);">1</div>
<img id="big" src="/img/art/big32695-1.jpg" alt="example" title="example" />
</div>

和css：

#photo1 {position:relative; width:100%;}
.dot {position:absolute; width:40px; height:40px; background:#000; font-size:24px;line-height:40px; text-align:center; border-radius:50%; color:#fff; z-index:90;}

我仍然没有问题，我的图片宽度还是100％（例如580像素）。为此，我的坐标x和y进行了计算。

但是，如果我减小屏幕宽度（智能手机或平板电脑），则当前图像宽度小于100％。如果我假设图像宽度为60％，该如何写这样的东西：

style="left:calc((60% * 50px) - 20px);top:calc((60% * 553px) - 20px);

调整关于当前图像宽度的第一个点的位置。

您有什么想法吗？非常感谢您的所有答复或建议。

Answer 1

尝试使用％定位元素。这将随着元素宽度的变化而改变宽度。