Absolute positioning an element on the circumference of a circle - html

Question

I have been working on to place an icon to the bottom right of an image having the property of border-radius: 50%.
Here's what I want to achieve(Icon to be on the circumference),
By absolute and relative positioning, I can place the icon as expected but on smaller screens, the icon goes out of place due to image resizing (with img-fluid class of bootstrap 4).
How can I make the icon to be at the same place across all screens even after image resizes?
.wrapper{
position: relative;
display: inline-block;
margin: 30px;
}
.image{
border-radius: 50%;
}
.icon{
height: 50px;
width: 50px;
background: #008080;
position: absolute;
border-radius: 50%;
right: 22px;
bottom: 42px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='wrapper'>
<img src='https://via.placeholder.com/350x350' class='image img-fluid'/>
<span class='icon'></span>
</div>

Answer 1

In order to get the desired result you need to position the center of the small circle (with a dimension of 0px × 0px) at the desired height/width of the bigger one and draw the small circle around this center.
Do note that if you want your positioning done responsively you need to do it in percentage, not in px.
Since functionality required from the child is purely visual, you can safely use a pseudo element:
.icon {
width: 0px;
height: 0px;
position: absolute;
}
.icon:after {
width: 50px;
height: 50px;
}
In terms of centering, you have a couple of options:
a) transform:translate(-50%,-50%)
.wrapper {
position: relative;
display: inline-block;
margin: 30px;
}
.image {
border-radius: 50%;
}
.icon {
height: 0;
width: 0;
position: absolute;
right: 16%;
bottom: 13.5%;
overflow: visible;
}
.icon:before {
height: 50px;
width: 50px;
position: absolute;
border-radius: 50%;
content: '';
transform: translate(-50%, -50%);
background-color: #008080;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class='wrapper'>
<img src='https://via.placeholder.com/350x350' class='image img-fluid' />
<span class='icon'></span>
</div>
b) flexbox on parent:
.wrapper {
position: relative;
display: inline-block;
margin: 30px;
}
.image {
border-radius: 50%;
}
.icon {
height: 0;
width: 0;
position: absolute;
right: 16%;
bottom: 13.5%;
display: flex;
overflow: visible;
align-items: center;
justify-content: center;
}
.icon:before {
height: 50px;
width: 50px;
border-radius: 50%;
position: absolute;
content: '';
background-color: #008080;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class='wrapper'>
<img src='https://via.placeholder.com/350x350' class='image img-fluid' />
<span class='icon'></span>
</div>
To rotate the small circle on the bigger one you can do it mathematically or you could do as I did: I made the :after 3px × 3px, changed % of any combo of top|bottom + left|right to the desired location on the bigger center circumference and increase the size of the small center back to 50px * 50px.
Also, to size the smaller circle down responsively, you could express the width and height in vw under a particular viewport width, making sure at the point where it starts shrinking the size in px with the one in vw translate to the same actual size. Example:
.wrapper {
position: relative;
display: inline-block;
margin: 30px;
}
.image {
border-radius: 50%;
}
.icon {
height: 0;
width: 0;
position: absolute;
right: 16%;
bottom: 13.5%;
display: flex;
overflow: visible;
align-items: center;
justify-content: center;
}
.icon:before {
height: 35px;
width: 35px;
border-radius: 50%;
position: absolute;
content: '';
background-color: #008080;
display: block;
}
#media (max-width: 350px) {
.icon:before {
width: calc(10vw - 6px);
height: calc(10vw - 6px);
min-width: 5px;
min-height: 5px;
/* 60px making up for the padding on .wrapper */
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class='wrapper'>
<img src='https://via.placeholder.com/350x350' class='image img-fluid' />
<span class='icon'></span>
</div>

Answer 2

Define right and bottom as % not px
Do the same for height and width if you want size to adapt. See my snippet
.wrapper{
position: relative;
display: inline-block;
margin: 30px;
}
.image{
border-radius: 50%;
}
.icon{
height: 15%;
width: 15%;
background: #008080;
position: absolute;
border-radius: 50%;
right: 10%;
bottom: 5%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='wrapper'>
<img src='https://via.placeholder.com/350x350' class='image img-fluid'/>
<span class='icon'></span>
</div>