html - 将元素绝对定位在圆的圆周上

我一直致力于在图像右下角放置一个图标，其属性为border radius:50%。
这是我想要达到的目标（图标在圆周上），

通过绝对和相对定位，我可以按预期放置图标，但在较小的屏幕上，图标会因图像大小调整而偏离位置（使用bootstrap 4的img fluid类）。

如何使图标在所有屏幕上处于同一位置，即使图像大小调整后也是如此？

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

最佳答案

将right和bottom定义为%而不是px
如果要调整大小，请对高度和宽度执行相同的操作。看我的片段

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