Aspect Ratio

The ratio utility creates responsive media containers with a fixed width-to-height proportion. It is built for images, videos, iframes, embeds, object tags, and custom content that needs to keep a stable visual shape across all layout widths.

Use .ratio as the wrapper, then add a ratio modifier such as .is-16x9 or .is-1x1. The direct media child is automatically stretched to fill the wrapper.

All ratio utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Class	Ratio	CSS	Common use
`ratio`	Base wrapper	`position: relative; width: 100%; overflow: hidden`	Required parent — always apply alongside a modifier.
`ratio is-1x1`	`1 / 1`	`aspect-ratio: 1 / 1`	Avatars, square cards, gallery thumbnails.
`ratio is-4x3`	`4 / 3`	`aspect-ratio: 4 / 3`	Product images, classic photo layouts.
`ratio is-16x9`	`16 / 9`	`aspect-ratio: 16 / 9`	Videos, embeds, wide media cards, article covers.
`ratio is-21x9`	`21 / 9`	`aspect-ratio: 21 / 9`	Cinematic banners, premium hero sections.

Usage

<div class="ratio is-16x9">
  <iframe src="https://www.youtube.com/embed/..." allowfullscreen></iframe>
</div>

Square media

<div class="ratio is-1x1">
  <img src="/images/avatar.jpg" alt="User avatar">
</div>

Product image

<div class="ratio is-4x3">
  <img src="/images/product.jpg" alt="Product preview">
</div>

Video embed

<div class="ratio is-16x9">
  <iframe
    src="https://www.youtube.com/embed/..."
    title="Video player"
    allowfullscreen>
  </iframe>
</div>

Cinematic hero media

<div class="ratio is-21x9">
  <img src="/images/hero.jpg" alt="Hero background">
</div>

Custom content

For custom HTML content inside a ratio wrapper, use a direct child with the .ratio-content class.

<div class="ratio is-16x9">
  <div class="ratio-content is-flex align-items-center justify-content-center">
    <div class="text-center">
      <h3>FrontAlign Engine</h3>
      <p>One responsive frame for media, embeds, and UI previews.</p>
    </div>
  </div>
</div>

How it works

The wrapper owns the ratio via aspect-ratio. The direct child is absolutely positioned and fills the wrapper completely with object-fit: cover.

.ratio {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.ratio.is-1x1  { aspect-ratio: 1 / 1; }
.ratio.is-4x3  { aspect-ratio: 4 / 3; }
.ratio.is-16x9 { aspect-ratio: 16 / 9; }
.ratio.is-21x9 { aspect-ratio: 21 / 9; }

.ratio > iframe,
.ratio > video,
.ratio > img,
.ratio > object,
.ratio > .ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

Real-world examples

Image gallery grid

<div class="is-grid md:grid-cols-3 gap-3">
  <div class="ratio is-1x1">
    <img src="/images/gallery-1.jpg" alt="Gallery item one">
  </div>

  <div class="ratio is-1x1">
    <img src="/images/gallery-2.jpg" alt="Gallery item two">
  </div>

  <div class="ratio is-1x1">
    <img src="/images/gallery-3.jpg" alt="Gallery item three">
  </div>
</div>

Article card with cover image

<article class="card">
  <div class="ratio is-16x9">
    <img src="/images/article-cover.jpg" alt="Article cover">
  </div>

  <div class="card-body">
    <h3>Build with utilities. Ship with components.</h3>
    <p>Create consistent media cards without custom sizing hacks.</p>
  </div>
</article>

Choosing the right ratio

Use case	Recommended ratio
User avatars and profile photos	`ratio is-1x1`
Square gallery thumbnails	`ratio is-1x1`
Product images	`ratio is-4x3`
Classic photo layouts	`ratio is-4x3`
YouTube / Vimeo video embeds	`ratio is-16x9`
Article cover images and media cards	`ratio is-16x9`
Cinematic hero banners	`ratio is-21x9`
Custom UI previews and panels	`ratio is-16x9` + `ratio-content`

Usage notes

The media element must be a direct child of .ratio. Wrapping the media in an extra <div> will break the fill behavior — use .ratio-content as the direct child for custom nested layouts instead.
Images and videos use object-fit: cover automatically, so they fill the frame and may crop slightly if their natural ratio does not match the wrapper ratio.
The ratio is calculated from the element width. The .ratio wrapper should receive its width naturally from a parent container, grid column, or width utility — it does not impose its own width.
.ratio works with img, video, iframe, object, and any direct child with the .ratio-content class.
To avoid cropping on product images where the full subject must be visible, use object-fit: contain on the child image element directly — this overrides the default cover behavior.
Nest .ratio inside grid or flex containers to produce consistent media grid layouts without any custom height values.