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

Иногда, при создании адаптивных сайтов, возникает необходимость придать адаптивности круглым блокам. С изображениями проблем, конечно же не возникает. Но блоки… Особенно, если внутри есть какой-то контент. А если вы не знаете сколько и какой контент будет внутри, то это становится настоящей головной болью. Обычно большинство прибегает к помощи javascript. Вычисляют ширину, присваивают высоту. Но на самом деле с помощью небольшого трюка можно легко сделать круги адаптивными на CSS. Сейчас я расскажу как.

Для начала рассмотрим html-структуру:

Что же нам нужно сделать? Для начала чуть оформим блоки стилями:

Теперь основное: дочернему элементу указываем высоту в ноль пикселей, а саму высоту формируем padding-ом:

Последнее, что осталось, — выровнять контент:

И всё! Посмотреть результат можно на этой странице.

comments powered by HyperComments

Автор

webbeaver

webbeaver

Верстаю, читаю, учусь