# 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>