Aspect Ratio

Use aspect ratio utilities to lock the proportional shape of an element regardless of its width. They are useful for images, video thumbnails, product cards, hero banners, and any container that must maintain a predictable visual footprint as the layout scales.

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

Quick reference

Usage

Apply an aspect ratio utility directly to the element that should maintain a fixed shape.

<div class="aspect-video rounded-4 shadow">
  Video Thumbnail
</div>

<img
  src="/photo.jpg"
  class="aspect-photo rounded-4"
  alt="Photo"
/>

<div class="aspect-square rounded-circle border">
  Avatar
</div>

<section class="aspect-wide rounded-5 bg-primary">
  Hero Banner
</section>

Aspect ratio vs Ratio component

FrontAlign provides two different solutions for proportional sizing.

Use aspect-* utilities when the element itself should hold a fixed shape. Use the .ratio component when videos, iframes, or embedded content should fill a responsive container.

Square layouts

Square layouts work well for avatars, logos, and uniform gallery grids.

<div class="aspect-square rounded-circle border">
  Avatar
</div>

<div class="aspect-square rounded-3 shadow">
  Gallery Item
</div>

Video previews

Use aspect-video for any media card that mirrors the standard 16:9 broadcast format.

<div class="aspect-video rounded-4 shadow">
  Video Preview
</div>

<div class="aspect-video bg-primary rounded-4">
  Course Thumbnail
</div>

Photography and blogs

The 4:3 ratio matches traditional camera output and is the standard choice for editorial images and portfolio covers.

<img
  src="/portfolio.jpg"
  class="aspect-photo rounded-4"
  alt="Portfolio"
/>

<div class="aspect-photo shadow rounded-4">
  Blog Cover
</div>

Hero sections and banners

Ultra-wide containers draw the eye horizontally and suit full-width marketing layouts.

<div class="aspect-wide rounded-5 bg-primary">
  Hero Banner
</div>

<div class="aspect-wide shadow-large rounded-5">
  Dashboard Statistics
</div>

Portrait layouts

Tall containers suit product images, team member cards, and mobile screen mockups.

<div class="aspect-tall rounded-4 border">
  Product Preview
</div>

<div class="aspect-tall shadow-large rounded-5">
  Mobile Mockup
</div>

Portfolio grid

Combine aspect ratio utilities with Grid utilities to build uniform image grids.

<div class="is-grid grid-cols-3 gap-3">
  <div class="aspect-photo shadow rounded-3"></div>
  <div class="aspect-photo shadow rounded-3"></div>
  <div class="aspect-photo shadow rounded-3"></div>
</div>

Product cards

Pair a square ratio with a content area below to create consistent e-commerce cards.

<div class="border rounded-4 shadow">
  <div class="aspect-square bg-slate-100"></div>
  <div class="p-3">Product Name</div>
</div>

Usage notes

• Use aspect-square for avatars, icons, and any element that must remain perfectly square.
• Use aspect-video for video thumbnails and media cards — it matches the universal 16:9 broadcast ratio.
• Use aspect-photo for editorial and portfolio images where the 4:3 camera ratio is expected.
• Use aspect-wide for hero sections and marketing banners that span the full viewport width.
• Use aspect-tall for product previews, team cards, and mobile screen mockups.
• Combine aspect ratio utilities with border, shadow, rounded, and hover utilities rather than writing custom dimension rules.
• Prefer aspect ratio utilities over fixed height values so elements scale correctly at every viewport size.
• Do not use aspect-* utilities when embedding videos, iframes, or external media — use the .ratio component instead so the content fills the container responsively.