Aspect Ratio

A container component to maintain consistent proportions for media and content.

Examples

Video (16:9)

16:9 Content
blade 
<x-plume::aspect ratio="video">
    <div class="w-full h-full bg-primary/10 flex items-center justify-center text-primary font-bold">
        16:9 Content
    </div>
</x-plume::aspect>

Square (1:1)

Square image
blade 
<x-plume::aspect ratio="square">
    <img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80"
        alt="Square image" class="w-full h-full object-cover">
</x-plume::aspect>

Custom Ratio (21:9)

21:9 Ultrawide
blade 
<x-plume::aspect ratio="21/9">
    <div
        class="w-full h-full bg-secondary/60 flex items-center justify-center text-secondary-foreground font-bold border-2 border-dashed border-secondary/30">
        21:9 Ultrawide
    </div>
</x-plume::aspect>
Prop Type Default Description
ratio string 'video' The aspect ratio: 'square' (1:1), 'video' (16:9), 'standard' (4:3), 'portrait' (3:4), 'cinema' (21:9), 'vertical' (9:16). Supports both '4/3' and '4:3' notations.

Usage

blade 
<x-plume::aspect ratio="16/9">
    <img src="image.jpg" class="w-full h-full object-cover" />
</x-plume::aspect>