Как на CSS сделать адаптивный круг?

Question

[Игорь]

https://jsbin.com/recupazino/edit?html,css,output

в чем моя ошибка,при растягивании круг искажается и вовсе уже не круг.....

Answer 1

[Игорь]

div h4 {
    
    background: #009688;
    position: relative;
    display: inline-block;
    width: 100%;
    height: 0;
    padding: 50% 0;
    border-radius: 50%;
}
.outsideCircl{
  height:30%;
}

Создай див вокруг h4 и этому диву уже ширину задавай,а круг внутри него будет адаптивным

Answer 2

[ivankalachikov86]

можно задавать в vw или vh (единицы, означающие ширину и высоту вьюпорта соответственно)
width: 3vw;
height: 3vw;

Comments

[Владимир Соломыкин]

height: 3vH

[ivankalachikov86]

можно и так, но тогда и ширину нужно задавать в vH, иначе получится та же картина, что и с процентами

[Игорь]

ivankalachikov86:а вьюпорт сам определяется?

[Игорь]

я думал vh по размеру шрифта идёт

Answer 3

[Дмитрий]

У вас изначально width / height - разные, поэтому в частном случае вы просто подогнали круг под пропорции монитора. У круга ширина и высота (условные, если вписать его в квадрат) должны быть одинаковы.