Aspect Ratio

Displays content within a desired ratio.

 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	Default	Type
`ratio`	`1`	`InputSignalWithTransform<number, NumberInput>` The desired aspect ratio (e.g., 16/9). By default, it is set to 1 (which results in a square, 1:1).