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
Loading component...
Installation
Add and import the module into your imports section.
Module
Loading syntax highlighter...
Standalone directives
Loading syntax highlighter...
Anatomy
Directive's set structure.
*vacAspectRatio
Input props
AspectRatioRoot Structural Directive
It constrains the element with the desired aspect ratio.
| Input | Default | Type | Required |
|---|---|---|---|
| ratio | 1 | number | false |
Use with custom components
The directive can be applied directly to custom Angular components.
Loading syntax highlighter...