Aspect Ratio

About

This page demonstrates ratio-locked containers for responsive layouts. A ratio class keeps an element's width-to-height relationship constant as screen width changes.

Why Use Aspect Ratios?

• Prevents layout shifts before media loads.
• Keeps card grids visually aligned even with mixed content.
• Preserves expected framing for video, image, and embed containers.
• Makes reusable layout utilities predictable across breakpoints.

Live Ratio Demo

Each block below is constrained by a ratio utility class.

How Ratio Math Works

The classic utility method uses percentage padding because vertical percentage padding is based on element width.

Formula: padding-top: (height / width) * 100%.

• 16:9 - 9 / 16 = 56.25%
• 4:3 - 3 / 4 = 75%
• 21:9 - 9 / 21 = 42.857%
• 3:2 - 2 / 3 = 66.667%

Code Patterns

1) Utility Class (Padding Method)

.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
}

.aspect_ratio__16_9 {
  padding-top: 56.25%;
}

.aspect-ratio > .aspect-ratio__content {
  position: absolute;
  inset: 0;
}

2) SCSS Mixin for Custom Ratios

@mixin aspect-ratio($width, $height) {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: ($height / $width) * 100%;
}

.aspect_ratio__5_7 {
  @include aspect-ratio(5, 7);
}

3) Modern Native Property

.media-frame {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Use native aspect-ratio when possible; keep utility fallback if you need broader compatibility behavior or legacy patterns.

Common Ratios and Typical Usage

• 1:1 - avatars, square cards, social thumbnails.
• 4:3 - older displays, legacy photo/video framing, presentation captures.
• 3:2 - common DSLR photo framing.
• 16:9 - modern video and presentation standard.
• 21:9 - ultrawide cinematic/hero media treatment.
• 9:16 - vertical mobile video formats.

Useful In Real Projects

• Video embed wrappers (YouTube, Vimeo, self-hosted players).
• Uniform product/media cards in responsive grids.
• Placeholder skeletons that reserve media space before load.
• CMS-driven image blocks where source dimensions vary.

HTML Structure Example

<div class="aspect-ratio aspect_ratio__16_9">
  <div class="aspect-ratio__content">
    <img src="/asset/image/content/example/demo.jpg" alt="Demo">
  </div>
</div>