Как сделать круг адаптивным, что бы сжимался в зависимости от размера экрана?

Question

[Underdoggit]

Всем привет, сделал круг https://codepen.io/goreska/pen/jjQXZB - внутри черного круга будет контент, который будет переключаться при клике на красные круги-переключатели, как сделать что бы внешнее кольцо на экранах планшета немного сжималось(когда задаю высоту в процентах - ничего не происходит). Плюс не ломало красные переключатели которые находятся на орбите внешнего dotted круга.

Answer 1

[profesor08]

Чтоб растянуть равномерно и пропорционально по высоте относительно ширины, надо задать padding в процентах.
padding-top: 100% - получится квадрат со стороной равной ширине контейнера.
Подробнее тут: https://css-tricks.com/aspect-ratio-boxes/