Placing dot element on round images on the same position

Question

Is there any way i can place a small dot div over some round images on the same position? The images are chosen by my website users so they don't have a fixed size. I want to place that dot just like in this photo below.

Edit: Sorry for not providing a code. Meanwhile, i have found a solution by targeting the img width by css. Here is my code for the working example:

<div class="img-box">
    <a class="avatar-link" href="#">
         <img width="100" height="100" alt="avatar" src="http://image.prntscr.com/image/28ad5c0c6da14d4abcaba545fd115289.png" class="user-avatar">
         <div class="user-status"></div>
   </a>
</div>

<div class="img-box">
    <a class="avatar-link" href="#">
         <img width="140" height="140" alt="avatar" src="http://image.prntscr.com/image/e1c7dec3eced491b8a16ac8d1103b5ea.png" class="user-avatar">
         <div class="user-status"></div>
    </a>
</div>

The css code:

.img-box{    
    margin: 40px;
}

a.avatar-link{
    position: relative;
    display: inline-block;
}

.img-box img.user-avatar{
    border-radius: 50%;
    display: block;
}

.user-status {
    border-radius: 50%;
    height: 10px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 10px;
    background-color: #ED0000;
}

.img-box img.user-avatar[width="140"] + .user-status{
   right: 16px;
   bottom: 15px;
}

Working example

Answer 1

You need to set the bottom and right position as percentages, and then use transform to adjust the position according to the width / height of the red circle.

I created an element called corner finder to work out there percentage values (trial and error, I don't know what the maths would be). This can be removed from your real code but helps demonstrate the process. As the circle gets very big it goes very slightly off, but it's close.

.img-box {
  margin: 40px;
}

.avatar-link {
  display: inline-block;
  position: relative;
}

.avatar-link::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 14.8%;
  right: 14.8%;
  width: 10px;
  height: 10px;
  background-color: red;
  transform: translate(5px, 5px); /* half width and height */
  border-radius: 50%;
}

.avatar-link img {
  border-radius: 50%;
  vertical-align: top;
}

/* Can be removed, just for demonstration */
.corner-finder {
  position: absolute;
  top: 14.8%;
  bottom: 14.8%;
  right: 14.8%;
  left: 14.8%;
  background-color: rgba(0,0,0,0.3);
  z-index: 1;
}

<div class="img-box">
  <a class="avatar-link" href="#">
    <div class="corner-finder"></div>
    <img src="http://placehold.it/100x100" alt="">
  </a>
</div>

<div class="img-box">
  <a class="avatar-link" href="#">
    <div class="corner-finder"></div>
    <img src="http://placehold.it/200x200" alt="">
  </a>
</div>

<div class="img-box">
  <a class="avatar-link" href="#">
    <div class="corner-finder"></div>
    <img src="http://placehold.it/300x300" alt=""> 
  </a>
</div>

<div class="img-box">
  <a class="avatar-link" href="#">
    <div class="corner-finder"></div>
    <img src="http://placehold.it/400x400" alt="">
  </a>
</div>

Answer 2

Any visual element should not be in your document.

Using CSS pseudo-element can achieve this visual effect.

HTML

<div class=circle></div>

SCSS

.circle {
  border: 1px solid black;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  padding: 50px;
  margin: 50px;
  position: relative;
  &::after {
    display: block;
    content: " ";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid black;
    position: absolute;
    right: 50px;
    bottom: 10px;
  }
}

Compiled CSS

.circle {
  border: 1px solid black;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  padding: 50px;
  margin: 50px;
  position: relative;
}
.circle::after {
  display: block;
  content: " ";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid black;
  position: absolute;
  right: 50px;
  bottom: 10px;
}

If you need anything to be set dynamically try to alter the CSS property value using JavaScirpt.

CodePen sample (it's just a sample but you get the idea), https://codepen.io/li-xinyang/pen/qrWZgY