How to lay out proportional blocks?

Question

css

The layout is responsive, using Bootstrap. Who can tell me how to lay out this piece of the layout? I made them all absolutely positioned, but I need to make these round blocks shrink with the expansion. Does anyone know which way to use?
Maybe a link to an article or something like that...

Answer 1

throw out the bootstrap and make handles for each screen

Answer 2

Do it either as a percentage or in ems, but this is already more complicated.

Answer 3

Do you want the width of the circles to change in proportion to the width of the layout, while still remaining round?
First, you can use the good old way with a transparent square picture inside the circle, which will expand the circle proportionally.
Secondly, you can do this:

<div class="wrap">
  
  <div class="round">
    <div class="round__content">
        <!-- Контент -->
    </div>
  </div>
  
</div>

.round {
  width: 20%;    /* нужная ширина в % */
  padding-top: 20%;    /* должен быть равен ширине в % */
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
}

.round__content {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 50%;
  overflow: hidden;
}

Changing the width of the .wrap will scale the circle. Example: codepen.io/Geminic/pen/jiCED

Answer 4

Relative padding-top values ​​(percentages, that is) are relative to the width.

.нашБлок:after{
    padding-top: 100%; /* relative to width! */
    content: "";
    display: block;
}

Obviously, the value can be different from 100% and thus you can specify the desired aspect ratio that you want to store. But the content must be placed absolutely inside, otherwise it will stretch our element as it should not.
An example without unnecessary elements in pure css: jsfiddle.net/b282vtp1/1
Animated jsfiddle.net/b282vtp1
And if the width itself is relative: jsfiddle.net/b282vtp1/2