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

Question

[Banny_Boom]

Сделал так:

<div class="wrapper_circle">
    <div class="circle"></div>
</div>

css.

.wrapper_circle{
    font-size:1%;
}
.circle{
    width:55em;
    height:55em;
    border-radius:50%;
}

И круг да, резиновый, но при уменьшении масштаба, он выходит за рамки родительских блоков, что я сделал не так?

Answer 1

[Алексей Быков]

max-width: 100%;
max-height: 100%;

?

Comments

[Banny_Boom]

по ширине помогло, но когда сжимаю, по высоте он растягивается и перестает быть кругом..
jsfiddle.net/ebrwq93L/2

[Алексей Быков]

Родитель перестает быть квадратом и меняется соотношение сторон, следовательно — круг перестает быть кругом. У вас размер вьюпорта меняется? Тогда так: codepen.io/anon/pen/Qboypx

Только напильником пройтись под свои нужды.

[Banny_Boom]

Алексей Быков: выходит, без js никак не обойтись ?

[Алексей Быков]

С em — никак, с viewportwidth можно — ниже отписали.

[Banny_Boom]

Алексей Быков: Извиняюсь, я слегка не полные данные дал, у меня ещё есть родитель с %
codepen.io/anon/pen/bdZEYv
попробуйте уменьшить масштаб

[Алексей Быков]

codepen.io/anon/pen/JdzGpY

Answer 2

[AlikDex]

Как сделать квадрат при помощи css (Или любой другой пропорциональный 4-х угольник):
www.mademyday.de/css-height-equals-width-with-pure...

Дальше думаю разберетесь.