Ratio

The .ratio class is used to make an element maintain a certain aspect ration. The best use for this class is together with iframe, embed, video or object.

    <div class="ratio ratio-16x9 w-100">
        <iframe src="https://www.youtube.com/embed/
            dQw4w9WgXcQ?si=WQnO-S5KwOijSrHx" allowfullscreen>
        </iframe>
    </div>

The aspect ratios can be easily customized to a desired value by adjusting the --aspect-ratio variable. By default, the following aspet ratios are available:

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

In order to enforce a custom ration, you just need to override the --aspect-ration variable. Note that the ratio needs to be expressed as a percentage. For instance, declaring --aspect-ration: 28% will result in a 32/9 aspect ratio.

    <div class="ratio" style="--aspect-ratio: 28%">
        <div class="content-center">
        </div>
    </div>