Как сверстать пропорциональные блоки?

Question

[b_efimenko]

Верстка адаптивная, с использованием Bootstrap. Кто что может подсказать как сверстать данный кусок макета? Сделал их все абсолютно спозиционированными, но нужно сделать так что бы эти круглые блоки уменьшались вместе с расширением. Кто то знает какой способ применить?
Может ссылку на статью или что то подобное...

Answer 1

[Pavel Yakovlev]

выкинуть бутстрап и делать ручками под каждый экран

Answer 2

[Виталий Киренков]

Делайте либо в процентах, либо в em-ах, но это уже по-сложнее.

Answer 3

[Сергей]

Нужно чтобы ширина кругов изменялась пропорционально ширине макета, при этом они оставались круглыми?

Во-первых, можно воспользоваться старым добрым способом с прозрачной квадратной картинкой внутри круга, которая будет пропорционально распирать круг.

Во-вторых, можно сделать так:

<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;
}

При изменении ширины .wrap будет масштабироваться окружность. Пример: codepen.io/Geminic/pen/jiCED

Answer 4

[s104]

Относительные значения padding-top (проценты, то есть) относятся к ширине.

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

Очевидно, что значение может отличаться от 100% и таким образом можно указывать нужное соотношение сторон, которое требуется хранить. А вот контент надо располагать внутри абсолютно, иначе растянет наш элемент как не надо.

Пример без лишних элементов на чистом css: jsfiddle.net/b282vtp1/1
Анимированно jsfiddle.net/b282vtp1
И если сама ширина относительная: jsfiddle.net/b282vtp1/2