html - 响应宽度和高度的圆圈

Question

好的，这是响应式圈子的常用 css 标记。

http://jsfiddle.net/WTWrB/355/

<div class="circle"></div>
.circle {
    width: 25%;
    height:0;
    padding-bottom: 25%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #4679BD;
}

问题是当调整宽度时，它们的大小可以调整，但不能调整高度。有没有办法让宽度和高度都调整圆的大小？

Answer 1

如果删除 padding-bottom: 25%; 并以像素为单位给出高度和宽度，那么我们可以通过高度和宽度调整 div 的大小，这里是 example