Adaptive how to make perfectly round blocks with content in CSS?

Need to make some round blocks with some content in a row on a small resolution screen to reduce the number of blocks in the row. The blocks must have the ratio of the height and width of 1 to 1, that is perfectly round.
Now solved this problem using JS:

Is it possible to do the same in CSS, without JS? If so, tell me, pls, how?
Thank you!
March 12th 20 at 08:43
1 answer
March 12th 20 at 08:45
There is a way how to make a side with your favorite ratio.
First create a div, or any block element, it sets the desired width and border-radius of 50%. This block embeds another block with a height of 0 and padding-top to be what is necessary for the aspect ratio, only set it in percent. In this case padding-top: 100% and for a ratio of 16:9 padding-top: 56.9%, if memory serves. Also this unit is set to position relative. In this block, put another block which receives position absolute width 100% height 100%. The last, third block put the content.
At first glance it looks crazy, but here's the thing.
The first block is responsible for the width, but the height and content directly in it.
The second block inside the first one has height too, but gets a padding-top in percentage, and as you know, padding in percent is calculated from the WIDTH of the PARENT, and not from height, thus pointing to padding-top in different percent get a different ratio of height to width, for the circle you need to specify 100%, that is 1:1, and for embedding, such as YouTube video, adaptive, specified 56,9%, in this case, the width to height is 16:9.
But! Putting padding we have no place for content, because if you add content in the second block, the height will change and the proportion violated. Therefore, the second unit set positioning, and it is put third block with an absolute positioning relative to the second block and the third block stretch in width and height, and to invest in it can be anything you want.
So everything worked fine still not bad to add box-sizing: border-box overflow: hidden, this is to taste) - Alvena_Kub commented on March 12th 20 at 08:48
@Alvena_Kub, thank you, made on this principle. - agnes_Brak commented on March 12th 20 at 08:51

Find more questions by tags LayoutCSS