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

Question

我一直在努力将图标放置在具有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>

Answer 1

为了获得所需的结果，您需要将小圆的中心（尺寸为0px×0px定位在较大的圆的所需高度/宽度处，并绘制这个中心周围的小圆圈。

请注意，如果您希望以响应方式完成定位，则需要按百分比而不是px进行定位。

由于孩子所需的功能纯粹是可视的，因此可以安全地使用伪元素：

.icon {
   width: 0px;
   height: 0px;
   position: absolute;
}
.icon:after {
   width: 50px;
   height: 50px;
}

关于居中，您有两种选择：

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：

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

要旋转较大圆圈上的小圆圈，您可以用数学方法来做，也可以像我一样做：我将:after 3px×3px改成{{1} } % + top|bottom中任意组合的}到较大中心圆周上的所需位置，然后将较小中心的大小增加到left|right * 50px。

此外，要响应地缩小较小的圆，可以在特定视口宽度下在50px中表示宽度和高度，并确保在其开始缩小vw中的尺寸时px中的一个转换为相同的实际大小。示例：

vw

.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 */
  }
  
}

Answer 2

将http-server和right定义为％而不是px
如果要调整大小，请对高度和宽度进行相同的操作。查看我的代码段

bottom

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