Components / Aspect Ratio

Aspect Ratio

A responsive ratio container that prevents media distortion.

16 / 9

example.component.html

html

<aevko-aspect-ratio ratio="16/9">
  <img alt="Project preview" />
</aevko-aspect-ratio>

Installation

npx aevko-ui@latest add aspect-ratio --yes

Source ownership

Style the host or projected media directly. The component only owns the ratio calculation, so cropping and object-fit stay under consumer control.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Property or slot	Type	Default	Description
`ratio`	number \| `${number}/${number}`	`16 / 9`	Width-to-height ratio maintained by projected content.

Accessibility contract

The container adds no semantics; projected media must provide its own alternative text.

Provide alternative text for meaningful images and avoid placing essential content in a cropped visual.