Layout

Aspect Ratio

Displays content within a desired ratio.

Preview

A preview of the Aspect Ratio component with interactive controls.

Preview Code

Interactive

Installation

Add the Aspect Ratio component to your project.

Bash

ng g @ng-cn/core:c aspect-ratio

Usage

Import and use the Aspect Ratio component in your Angular application.

Template TypeScript

template.html

<div class="w-full max-w-md">
  <AspectRatio [ratio]="16 / 9" class="bg-muted rounded-lg overflow-hidden">
    <img
      src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
      alt="Photo by Drew Beamer"
      class="h-full w-full object-cover"
    />
  </AspectRatio>
</div>

Examples

Explore different variations and use cases for the Aspect Ratio component.

Basic

Preview Code

Interactive

Square

Preview Code

Interactive

API Reference

Props

Prop	Type	Default	Description
`ratio`	`number`	`1`	The desired aspect ratio.
`class`	`string`	—	Additional CSS classes to apply.