Aspect Ratio

Constrains its content to maintain a given width-to-height ratio.

API

Specify the aspect-ratio value either as a number or a division of two numbers:

.AspectRatio(0.5) // use a ratio
.AspectRatio(1f / 2f) // or division

Additionally, you can specify how the content should be adjusted to meet the aspect ratio:

.AspectRatio(0.5, AspectRatioOption.FitArea)

Fitting Options

Method	Description
AspectRatioOption.FitWidth	Adjusts content to occupy the full width available. Used as the default setting in the library.
AspectRatioOption.FitHeight	Adjusts content to fill the available height. Often used with height-constraining elements.
AspectRatioOption.FitArea	Adjusts content to fill the available area while maintaining its aspect ratio. This may result in the content fully occupying either the width or height, depending on its dimensions. Often used with constraining elements

DANGER

Please be careful. This component may try to enforce size constraints that are impossible to meet. For example, the container may require more space than is available, or may try to squeeze its child into less space than possible.

Such scenarios result in a layout exception.

Example

container
    .Width(300)
    .Height(300)
    .AspectRatio(3f/4f, AspectRatioOption.FitArea)
    .Background(Colors.Grey.Lighten2)
    .AlignCenter()
    .AlignMiddle()
    .Text("3:4 Content Area");