想要得到一个高宽相等会自适应的圆形

分析一下需求：

• 首先，宽度应该是自适应的，我用了bootstrap的栅格化，可以用百分比等其他自适应方式实现。
• 高度与宽度相等。
• 圆形。

这里的难点在于，高度与宽度相等，我使用了padding属性。
当padding的值的单位是百分比%时，都是基于父元素的宽度的百分比。
根据盒子模型：元素的宽度 = 左右边框 + 左右内边距 + 内容宽度

W3C--padding属性可能的值
W3C--盒子模型

代码：

<div class="row">
  <div class="col-md-4 border">
    <div class="jf-home-services-wrap"></div>
  </div>
  <div class="col-md-4">123</div>
  <div class="col-md-4">123</div>
</div>

.jf-home-services-wrap {
    width: 100%;
    background: #409eff;
    padding: 50% 0;
    border-radius: 100%;
}
.border {
    border: 1px solid red;
}

高度会随着宽度的改变而改变