如何使用CSS制作响应式循环？

Question

我使用百分比作为宽度使用CSS制作圆圈，但这显然不适用于高度，因为它们变成椭圆形。是否有一种纯粹的CSS方式来做到这一点？

Answer 1

将此代码用于.circle类：

.circle {
position: relative;
border-radius: 50%;
width: 100%;
height: auto;
padding-top: 100%;
background: white;
}

确保您的填充顶部与您的宽度相同，并使您的高度自动。