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