Ratios

Use generated pseudo elements to make an element maintain the aspect ratio of your choosing.

Aspect ratios

1x1
4x3
16x9
21x9
<!--ratio-->
<div class="ratio ratio-1x1">
    <div>1x1</div>
  </div>
  <div class="ratio ratio-4x3">
    <div>4x3</div>
  </div>
  <div class="ratio ratio-16x9">
    <div>16x9</div>
  </div>
  <div class="ratio ratio-21x9">
    <div>21x9</div>
  </div>

Custom ratios

2x1
<!--ratio-->
<div class="ratio ratio-1x1">
<div>1x1</div>
</div>
<div class="ratio ratio-4x3">
<div>4x3</div>
</div>
<div class="ratio ratio-16x9">
<div>16x9</div>
</div>
<div class="ratio ratio-21x9">
<div>21x9</div>
</div>