在响应图像上定位点

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%（例如 580px）。我的坐标 x 和 y 是为此计算的。

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

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

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

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

Answer 1

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

Answer 2

下面是一个使用百分比定位的例子：

https://codepen.io/lokase/pen/MWaxgjq

HTML:

<div class="con">
  <div class="dot dot1"></div>
  <div class="dot dot2"></div>
  <div class="dot dot3"></div>
  <img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</div>

CSS:

.con {
  max-width: 600px;
  position: relative;
}

.dot {
  background: red;
  border-radius: 50%;
  height: 20px;
  position: absolute;
  width: 20px;
}

.dot1 {
  top: 10%;
  left: 10%;
}

.dot2 {
  top: 30%;
  right: 20%;
}

.dot3 {
  bottom: 40%;
  left: 50%;
}

img {
  width: 100%;
}

Answer 3

尝试这样的事情。

我已经 fixed 到达底部。

左边我给了10%，不过你可以根据自己的要求改(580/30=19.33%)。

#photo1 {position:relative; width:100%;}

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

<div id="photo1">
<div class="dot" style="left:10%; bottom:0px;">1</div>
<img id="big" src="/img/art/big32695-1.jpg" alt="example" title="example" />
</div>

在响应图像上定位点

Positioning dots on responsive image

css

positioning