Positioning dots on responsive image

Question

I need to positionate several dots on one image with css.(see example)

I'm using the code below (for dot number 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>

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

I don't have any problem still my picture width is 100% (e.g 580px). My coordinates x and y are calculted for that.

But, if I reduce my screen width (smartphone or tablet), the current image width is less than 100%. If I supposing that the image width is 60%, how can I write something like this :

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

to adjust position of my first dot regarding the current image width.

Do you have any ideas ? Thanks a lot for all replies or suggestions.

Answer 1

Here is an example using percentage positioning:

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 2

try positioning the elements using %. That would alter the width as the element's width changes.