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

Question

[Dymok]

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

Можно ли это же сделать на CSS, без JS? Если да, то подскажите, плс, как?
Спасибо!

Comments

[Орхан Гасанлы]

для адаптивности флексбокс + а для окружности border-radius:100% не подойдет?

[Dima Polos]

Контент заранее определен или может меняться динамически?

[Dymok]

Dima Polos, динамический

[Dymok]

azerphoenix, так ведь соотношение сторон не будет 1:1 само по себе?

[Александр Таратин]

Dymok, www.mademyday.de/css-height-equals-width-with-pure...

Answer 1

[Dima Polos]

Есть способ как сделать стороны с любимым соотношением.
Сначала создается div, или любой блочный элемент, ему задается необходимая ширина и border-radius 50%. В этот блок вкладывается другой блок с высотой 0 и padding-top такой, какой надо для пропорции, только задается он в процентах. В данном случае это padding-top: 100%, а для соотношения 16:9 padding-top: 56.9%, если память не изменяет. Также этому блоку задается position relative. В этот блок вкладываем еще один блок, который получает position absolute, width 100% height 100%. Уже в этот последний, третий, блок вкладываем контент.

Comments

[Dima Polos]

На первый взгляд дико смотрится, но суть в следующем.
Первый блок отвечает за ширину, но высоты и контента непосредственно в нем нет.
Второй блок внутри первого не имеет высоты тоже, но получает padding-top в процентах, а как известно, паддинг в процентах считается от ШИРИНЫ РОДИТЕЛЯ, а не от высоты, таким образом указывая паддинг-топ в разных процентах получаем разное соотношения высоты к ширине, для круга нужно указать 100%, то есть 1:1, а для встраивания, например видео с ютуба, адаптивно, указываем 56,9%, в таком случае ширина к высоте будет 16:9.
Но! Указав паддинг у нас нет места для контента, ведь если добавить контент во второй блок высота изменится и пропорция нарушится. Поэтому второму блоку задаем позиционирование, и в него же вкладываем третий блок с позиционированием абсолют относительно второго блока и растягиваем третий блок по ширине и высоте, а в него вкладывать можно все, что вздумается.
Чтоб все хорошо работало еще не плохо бы добавить box-sizing: border-box и overflow: hidden, это по вкусу)

[Dymok]

Dima Polos, спасибо, сделал по этому принципу.