如何在圆圈内动态创建一个圆圈（如甜甜圈）答案

【问题标题】：How to create a circle inside a circle dynamically (like a donut)如何在圆圈内动态创建一个圆圈（如甜甜圈）
【发布时间】：2019-07-19 18:28:14
【问题描述】：

我想像甜甜圈一样在圆圈内创建一个圆圈，但它应该是动态创建的。例如。如果我的页面宽度为 500 像素，高度为 500 像素，它应该适合。或者如果我有一些其他的宽度和高度，比如 100px 和 100px，它应该适合。我正在使用 div 和 css 在 angular 项目中创建一个组件。我已经浏览了下面的 URL，但是高度和宽度是固定的 How to make one circle inside of another using CSS

下面是内圈和外圈的css

.empty-wheel-outer {
  display: inline-block;
  width:  60px;
  height: 60px;
  border: 1px solid $alto;
  border-radius: 50%;
}

.empty-wheel-inner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 1px solid $alto;
  border-radius: 50%;
  margin: 13px;
}

【问题讨论】：

不使用固定尺寸，而是将高度和宽度设置为100% 或100vw/vh
这个问题符合发帖要求，如果你要投反对票，请说明原因。
@NibblyPig。并不真地。甚至没有包含任何 HTML。我们必须对 OP 代码做出假设。
使用高度和宽度为 100% 解决了我的问题

标签： html css user-interface

【解决方案1】：

子项的高度和宽度将以%为单位动态添加，并通过添加圆形类自动居中

Try changing child width and height it will stay in center

如果您需要进一步解释，请联系我。

.wraper {
  width: 60px;
  height: 60px;
}

.circle {
  display: flex;
  align-items: center;
  border: 1px solid red;
  border-radius: 50%;
}

.empty-wheel-outer {
  width: 100%;
  height: 100%;
}

.empty-wheel-inner {
  width: 50%;
  height: 50%;
  margin: auto;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="wraper">
    <span class="circle empty-wheel-outer">
      <span class=" circle empty-wheel-inner"></span>
    </span>
    <div/>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

这应该会有所帮助：

.outerCircle{
  width: 60px;
  height: 60px;
  border: 1px solid #000;
  border-radius: 50%; 
  display: flex;
  align-items: center;
  justify-content: center;
}
.innerCircle{
  width: 32px;
  height: 32px;
  border: 1px solid #000;
  border-radius: 50%;
}

<div class="outerCircle">
  <div class="innerCircle"></div>
</div>

【讨论】：

非常感谢，它在使用 flex 时运行顺畅，并提供 100% 的高度和宽度。使用百分比，它占据父div高度和宽度的空间

【解决方案3】：

我对您的代码进行了一些更改。请检查这个

Answer to "https://stackoverflow.com/questions/54881664/how-to-create-a-circle-inside-a-circle-dynamically-like-a-donut"

CSS：

.empty-wheel-outer {
  display: inline-block;
  width:  -webkit-fill-available;
  height:  -webkit-fill-available;
  border: 1px solid red;
  border-radius: 50%;
}

.empty-wheel-inner {
      display: inline-block;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    border: 1px solid blue;
    border-radius: 50%;
    margin: 0 10%;
}

<div class="empty-wheel-outer">
  <div class="empty-wheel-inner">
  </div>
</div>

【讨论】：