分析一下需求：
- 首先，宽度应该是自适应的，我用了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;
}
高度会随着宽度的改变而改变
网友评论