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>