ObjectUIComponentsLayout
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
The box holds its content one of two ways, and the renderer reads exactly one of them:
set image for a photo, which is drawn to fill the box; otherwise the box renders
children.
interface AspectRatioSchema {
type: 'aspect-ratio';
ratio?: number; // Width / Height ratio (default: 16 / 9)
image?: string; // Image URL, drawn to fill the box
alt?: string; // Alt text for `image`
children?: SchemaNode | SchemaNode[]; // Content, when no `image` is set
className?: string;
}