UnluckySerivelha
@UnluckySerivelha

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

Нужно сделать несколько круглых блоков с некоторым контентом в ряд, на маленьком разрешении экрана уменьшать количество блоков в ряду. Блоки должны иметь соотношение высоты и ширины 1 к 1, то есть идеально круглыми.
Сейчас решил эту задачу с помощью JS:

Можно ли это же сделать на CSS, без JS? Если да, то подскажите, плс, как?
Спасибо!
  • Вопрос задан
  • 255 просмотров
Решения вопроса 1
dimovich85
@dimovich85
HTML, CSS, JS, VUE, PHP
Есть способ как сделать стороны с любимым соотношением.
Сначала создается div, или любой блочный элемент, ему задается необходимая ширина и border-radius 50%. В этот блок вкладывается другой блок с высотой 0 и padding-top такой, какой надо для пропорции, только задается он в процентах. В данном случае это padding-top: 100%, а для соотношения 16:9 padding-top: 56.9%, если память не изменяет. Также этому блоку задается position relative. В этот блок вкладываем еще один блок, который получает position absolute, width 100% height 100%. Уже в этот последний, третий, блок вкладываем контент.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
24 окт. 2018, в 00:19
3000 руб./за проект
23 окт. 2018, в 23:38
1000 руб./за проект