The Aspect Ratio directive provides a powerful and flexible solution for maintaining a specific aspect ratio for an element, ensuring its width and height remain in a precise relationship as the viewport or element size changes.

AspectRatio

Copy Code

Installation

Add and import the module into your imports section.

Module

Standalone directives

Anatomy

Directive's set structure.

<docs-anatomy [node]="componentStructure" />

Input props

AspectRatioRoot Structural Directive

It constrains the element with the desired aspect ratio.

<docs-table [columns]="columnsInput" [rows]="rootInputRows" />

Use with custom components

The directive can be applied directly to custom Angular components.

<docs-code [code]="example" language="html" />