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?
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.