Skip to main content

Ratio

Use generated pseudo elements to maintain aspect ratios and fit embeddable content like iframes, videos, and images.

About

Use the ratio helper to manage the aspect ratio of external content like <iframe>s and <video>s. The .ratio wrapper uses a generated ::before pseudo-element with the ratio applied via a CSS custom property --boodoo-aspect-ratio.

<div class="ratio ratio-16x9">
  <iframe src="..." title="YouTube video" allowfullscreen></iframe>
</div>

Ratios

Available ratio classes: .ratio-1x1, .ratio-4x3, .ratio-16x9, .ratio-21x9, and .ratio-4x5. Or set a custom ratio with the aspect ratio utility classes.

1x1
<!-- ratio class -->
<div class="ratio ratio-1x1">...</div>

Ratio utilities

You can also use the aspect-* utilities (aspect-square, aspect-video, aspect-4\/3, etc.) which set the modern CSS aspect-ratio property for boxes:

<div class="aspect-video bg-light rounded"></div>