css - 在响应式图像上定位点

Question

我需要用 css 在一张图像上定位几个点。（见示例）

我正在使用下面的代码（对于点号 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);

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

你有什么想法 ？非常感谢所有回复或建议。

标签： csspositioning

Answer 1

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