Docs
Aspect Ratio
Aspect Ratio
Displays content within a desired ratio.
Loading...
Loading...
import { UbAspectRatioDirective } from '@/components/ui/aspect-ratio'
import { IMAGE_LOADER, type ImageLoaderConfig, NgOptimizedImage } from '@angular/common'
import { Component } from '@angular/core'
@Component({
standalone: true,
selector: 'aspect-ratio-demo-new-york',
imports: [UbAspectRatioDirective, NgOptimizedImage],
providers: [
{
provide: IMAGE_LOADER,
useValue: (config: ImageLoaderConfig) => {
return `${config?.src}?w=${config?.width}`
},
},
],
template: `
<div ubAspectRatio [ratio]="16 / 9" class="bg-muted">
<img
ngSrc="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd"
alt="Photo by Drew Beamer"
fill
class="h-full w-full rounded-md object-cover"
ngSrcset="640w, 750w, 828w, 1080w, 1200w, 1920w, 2048w, 3840w"
sizes="100vw"
style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
priority
/>
</div>
`,
})
export class AspectRatioDemoNewYork { }import { UbAspectRatioDirective } from '@/components/ui/aspect-ratio'
import { IMAGE_LOADER, type ImageLoaderConfig, NgOptimizedImage } from '@angular/common'
import { Component } from '@angular/core'
@Component({
standalone: true,
selector: 'aspect-ratio-demo-default',
imports: [UbAspectRatioDirective, NgOptimizedImage],
providers: [
{
provide: IMAGE_LOADER,
useValue: (config: ImageLoaderConfig) => {
return `${config?.src}?w=${config?.width}`
},
},
],
template: `
<div ubAspectRatio [ratio]="16 / 9" class="bg-muted">
<img
ngSrc="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
alt="Photo by Drew Beamer"
fill
class="h-full w-full rounded-md object-cover"
ngSrcset="640w, 750w, 828w, 1080w, 1200w, 1920w, 2048w, 3840w"
sizes="100vw"
style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
priority
/>
</div>
`,
})
export class AspectRatioDemoDefault { }Installation
npx shadcn-ng@latest add aspect-ratio
npm
yarn
pnpm
bun
Install the following dependencies:
npm install @radix-ng/primitives
npm
yarn
pnpm
bun
Copy and paste the following code into your project.
import { Directive } from '@angular/core'
import { RdxAspectRatioDirective } from '@radix-ng/primitives/aspect-ratio'
@Directive({
standalone: true,
selector: 'ubAspectRatio',
hostDirectives: [
{
directive: RdxAspectRatioDirective,
inputs: ['ratio'],
},
],
})
export class UbAspectRatioDirective { }import { Directive } from '@angular/core'
import { RdxAspectRatioDirective } from '@radix-ng/primitives/aspect-ratio'
@Directive({
standalone: true,
selector: 'ubAspectRatio',
hostDirectives: [
{
directive: RdxAspectRatioDirective,
inputs: ['ratio'],
},
],
})
export class UbAspectRatioDirective { }Update the import paths to match your project setup.
Usage
import { UbAspectRatioDirective } from "@/components/ui/aspect-ratio"<div ubAspectRatio [ratio]="16 / 9">
<img src="..." alt="Image" class="rounded-md object-cover" >
</div>