在响应式图像上定位点答案

【问题标题】：Positioning dots on responsive image在响应式图像上定位点
【发布时间】：2020-05-23 00:57:48
【问题描述】：

我需要用 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);

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

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

【问题讨论】：

尝试对上、右、下、左使用百分比值？
好的，你的意思是我应该在显示之前以百分比计算我的坐标？
是的，看下面的例子。
很好的回答，非常感谢

标签： css positioning

【解决方案1】：

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

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%;
}

【讨论】：

不错的答案，只是一个精度。对于我的宽度，没问题，我可以计算初始宽度（580px）的百分比但是我的图像高度是可变的，我怎样才能动态获得高度？好的，我找到了，谢谢！！

【解决方案2】：

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

【讨论】：

如果我理解的话，我必须为我的示例计算 50px * 100/580px = 8.62% 剩余？
可以，或者您可以使用试错法。只需检查一下，看看哪个值好。
非常感谢，好主意！

【解决方案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>

【讨论】：