Aspect Ratio

Displays content within a desired ratio.

Usage

SAspectRatio({ ratio: 16 / 9 }) {
  Image($r('app.media.background'))
    .width('100%')
    .height('100%')
    .objectFit(ImageFit.Cover)
}

Approximate web preview — the HarmonyOS rendering is the reference.

Ratios

SAspectRatio({ ratio: 4 / 3 }) { ... }

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SAspectRatio

shadcn-vue AspectRatio: a full-width box whose height follows ratio (width / height). Children are centred; give them width('100%').height('100%') to fill (e.g. an Image with objectFit(ImageFit.Cover)).

Prop	Type	Default	Description
ratio	number	1	width / height, e.g. 16 / 9.
modifier	AttributeModifier<StackAttribute>	new SparkNoopModifier<StackAttribute>()

Slots: children (trailing closure)