Как сделать отзывчивый круг только с CSS?

Question

Я сделал круги только с CSS, используя проценты в качестве ширины, но это, очевидно, не работает с высотой, когда они становятся овалами. Есть ли чистый способ CSS сделать это?

Answer 1

Используйте этот код для класса .circle:

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

убедитесь, что обивка сверху таким же, как на ширину и сделать вашу высоту авто.