Use generated pseudo elements to make an element maintain a chosen aspect ratio; great for handling video and slideshow embeds.

About #

Use the ratio helper to manage the aspect ratios of external content like <iframe>, <embed>, <video>, and <object>. These helpers also can be used on any standard HTML child element (e.g., a <div> or <img>). Styles are applied from the parent .ratio class directly to the child. Please note, you don't need frameborder="0" on your <iframe> elements as we override that.

Example #

Wrap any embed, like an <iframe>, in a parent element with .ratio and an aspect ratio class. The immediate child element is automatically sized thanks to our universal selector .ratio > *.

<div class="ratio ratio-16x9 specific-w-450 mw-100 mx-auto rounded-3 overflow-hidden">
  <iframe src="https://www.youtube.com/embed/X59FCW3vOlE" title="YouTube video" allowfullscreen></iframe>

Aspect ratios #

Aspect ratios can be customized with the following modifier classes: .ratio-1x1, .ratio-4x3, .ratio-16x9, and .ratio-21x9.

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

Custom ratios #

Each .ratio-* class includes a CSS variable in the selector. You can override this CSS variable to create custom aspect ratios on the fly with some quick math on your part. For example, to create a 2x1 aspect ratio, set --bs-aspect-ratio: 50% on the .ratio.

<div class="ratio" style="--bs-aspect-ratio: 50%;">
Up next

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.