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):

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.

user_13570290 · Answer

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

user_981047 · Answer

Here is an example using percentage positioning:

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

HTML:

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

user_5647272 · Answer

Try something like this.

I have made it fixed to bottom.

For left I have given 10%, but you can change that to your requirements (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;}

Positioning dots on responsive image

3 Answers