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

Question

[Сергей]

Подскажите плиз как сделать круги адаптивными. Чтобы они пропорционально изменяли размер и растягивались на ширину контейнера в котором они находятся.

Answer 1

[Михаил Горячкин]

HTML:

<div class="wrapper">
  <div class="circle">
      <i></i>
  </div>
  <div class="circle">
      <i></i>
  </div>
  <div class="circle">
      <i></i>
  </div>
</div>

CSS:

body, html {
  width: 100%;
  height: 100%;
}

.wrapper {
  width: 100%;
  text-align: justify;
  background-color: #000;
  
  &:after {
    content: "";
    display: inline-block;
    width: 100%;
  }
  
  .circle {
    display: inline-block;
    vertical-align: top;
    width: 23%;
    height: 100%;
    
    i {
      display: block;
      background-color: yellow;
      width: 100%;
      padding-bottom: 100%;
      border-radius: 50%;
    }
  }
}

Пример

Answer 2

[Ksider]

div {
  padding-bottom: 20%;
  width: 20%;
  margin: 0 auto;
  border-radius: 50%;
}

Ладно тоже на codepen расшарю codepen.io/ksider/pen/qEJWgy