Responsice boxes

by using CSS only

by mitjajez

HTML

<div class="box-wraper">
<div class="box ratio1_1 red">
  <div class="box-content">
    Square box 1:1
  </div>
</div>
</div>

<div class="box-wraper">
<div class="box ratio4_3 green">
  <div class="box-content">
    Old screens 4:3
  </div>
</div>
</div>

<div class="box-wraper">
<div class="box ratio16_9 blue">
  <div class="box-content">
    Usual video box 16:9
  </div>
</div>
</div>

CSS

.box-wraper {
  width: 100%;
  max-width: calc(100% / 3);
  float:left;
}
.box-content {
  width: 100%; height: 100%;
  top: 0;right: 0;bottom: 0;left: 0;
  position: absolute;
}
.box {
  position: relative;
  width: 100%;
}
.box::before {
    content: "";
    display: block;
    padding-top: 100%; /*square for no ratio*/
}
.ratio1_1::before { padding-top: 100%; }
.ratio1_2::before { padding-top: 200%; }
.ratio2_1::before { padding-top: 50%; }
.ratio4_3::before { padding-top: 75%; }
.ratio16_9::before { padding-top: 56.25%; }

.box.red{
  background-color: red;
}
.box.green{
  background-color: green;
}
.box.blue{
  background-color: blue;
}