Aspect Ratio

Displays content within a desired ratio.

main.ts

styles.css

import { Component } from '@angular/core';

import { RdxAspectRatioDirective } from '@radix-ng/primitives/aspect-ratio';

@Component({
    selector: 'radix-aspect-ratio',
    standalone: true,
    imports: [RdxAspectRatioDirective],
    template: `
        <div class="Container">
            <div [ratio]="16 / 9" rdxAspectRatio>
                <img
                    class="Image"
                    src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
                    alt="Landscape photograph by Tobias Tullius"
                />
            </div>
        </div>
    `,
    styleUrl: 'aspect-ratio-demo.css'
})
export class AspectRatioDemoComponent {}

.Container {
    width: 300px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 10px var(--black-a7);
}

.Image {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

Features

Accepts any custom ratio.

Anatomy

<div rdxAspectRatio>
    <img />
</div>

API Reference

Root

Contains the content you want to constrain to a given ratio.

RdxAspectRatioDirective

Prop	Type	Default
`ratio`	-	`input<number, NumberInput>(1, { transform: numberAttribute })`