AspectRatio

AspectRatio keeps a child at a fixed width-to-height relationship while still letting the surrounding layout decide the final size.

This is useful for previews, thumbnails, video frames, maps, or card media where the shape matters more than the exact pixel size. It solves a common responsive problem: you want a 16:9 preview or a square tile, but you do not want to hard-code the exact width and height everywhere.

Use AspectRatio when the child should scale responsively while preserving shape. Do not use it when you already know both the exact width and exact height, or when you need cropping or clipping rather than proportional sizing.

Example

use fission::prelude::*;

let widget: Widget = AspectRatio {
    ratio: 16.0 / 9.0,
    child: 
        Container::new(Text::new("Preview").into())
            .bg(fission::core::op::Color {
                r: 32,
                g: 37,
                b: 49,
                a: 255,
            })
            .into(),
    ,
}
.into();

The parent still controls how much space is available. AspectRatio only makes sure the child stays in the requested proportion.

Field table

Field	Type	Meaning	Notes / default behavior
ratio	f32	Width divided by height.	Required. 16.0 / 9.0 gives a widescreen rectangle; 1.0 gives a square.
child	Widget	The node constrained by the ratio.	Required. The child still renders normally inside the resulting box.

Layout behavior

Internally, AspectRatio lowers to a box layout node with aspect_ratio: Some(ratio). If only one dimension becomes bounded by the parent, the other dimension is derived from the ratio. If both dimensions remain flexible, the surrounding constraints decide the final size.

That means AspectRatio is about sizing, not clipping. If the child paints outside its bounds or needs rounded corners, pair it with Clip or Container.

Specific advice

Keep the ratio positive and meaningful. A very common pattern is 1.0 for avatars or tiles and 16.0 / 9.0 for media. If your layout needs cards that automatically wrap while keeping consistent preview shapes, combine AspectRatio with SimpleGrid.

Production checklist

For AspectRatio, review the fields that change behavior before treating the widget as finished: ratio, child. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.

•

If this widget appears inside an interactive flow, keep the surrounding action binding in the parent component and test that the flow still has one clear reducer path.

•

When child widgets are generated from data, give reordered or filtered rows an explicit WidgetId so retained local state and scroll behavior do not drift between items.

•

Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.

•

Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.

If a screen starts repeating the same AspectRatio setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.

Container, Clip, and SimpleGrid.