怎样把一个圆做成响应式呢？怎样动态设置高度？

Question

我设置了最小宽度和高度。但是每个人的电脑屏幕宽度不同。所以无法知道宽度是多少？高度也无法设置。如果拉伸之后。就变成扁的了。怎么解决这个问题呢？我用的scss能不能计算宽度呢？然后把宽度赋值给高度。变成一样的宽高、
如图：

Answer 1

/* 外层保尺寸 */
.circle-wrapper{
    position: relative
}
/* 中间画圆 */
.circle-wrapper>.circle{
    padding-bottom: 100%;
    border-radius: 50%;
    position: relative;
    border: solid 1px;
    width: 100%;
    height: 0;
}
/* 内层填内容 */
.circle-wrapper>.circle>.inner{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    top: 0;
}