Aspect Ratio

Displays content within a desired ratio.

16 / 9

Installation

uvx django_shadcn@latest add aspect_ratio

Usage

16 / 9

<c-aspect-ratio ratio='16/9' class='overflow-hidden rounded-lg'>
    <img src='/cover.jpg' alt='' class='size-full object-cover' />
</c-aspect-ratio>

Radix reserves the space with a padding hack. Here it is the native aspect- ratio CSS property, so ratio takes anything the property accepts: 16/9, 4/3, 1.85. The default is 1/1.

Examples

Square

1 / 1

<c-aspect-ratio class='overflow-hidden rounded-lg bg-muted'>...</c-aspect-ratio>

Portrait

3 / 4

<c-aspect-ratio ratio='3/4' class='overflow-hidden rounded-lg bg-muted'>...</c-aspect-ratio>