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
{
"type": "aspect-ratio",
"ratio": 1.7777777777777777,
"content": {
"type": "image",
"src": "https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd",
"alt": "Photo"
}
}Different Ratios
Square
{
"type": "aspect-ratio",
"ratio": 1,
"content": {
"type": "card",
"content": "Square (1:1)"
}
}4:3
{
"type": "aspect-ratio",
"ratio": 1.3333333333333333,
"content": {
"type": "card",
"content": "4:3 Ratio"
}
}Ultrawide
{
"type": "aspect-ratio",
"ratio": 2.3333333333333335,
"content": {
"type": "card",
"content": "21:9 Ratio"
}
}Schema
interface AspectRatioSchema {
type: 'aspect-ratio';
ratio: number; // Width / Height ratio
content: ComponentSchema; // Content to display
className?: string;
}Examples
Video Container
Video Aspect Ratio
{
"type": "aspect-ratio",
"ratio": 1.7777777777777777,
"content": {
"type": "card",
"className": "bg-muted flex items-center justify-center",
"content": "Video Player (16:9)"
}
}