ObjectUIObjectUI

Aspect Ratio

Maintain a consistent width to height ratio

The Aspect Ratio component maintains a consistent width to height ratio for content.

Basic Usage

16 9 Aspect Ratio

Different Ratios

Square

4 3

Ultrawide

Schema

interface AspectRatioSchema {
  type: 'aspect-ratio';
  ratio: number;                  // Width / Height ratio
  content: ComponentSchema;       // Content to display
  className?: string;
}

Examples

Video Container

Video Aspect Ratio

On this page