Relative size of UIImage with aspect ratio

[Iaphetes]

Hi,

I'm getting somewhat desperate here:
I'm trying to have a UI, that will (mostly) scale with the size of the window.
While that in itself works I want to be able to have Images, that keep their aspect ratio while e.g. filling the height of the parent node. I have little experience with UI work in general so maybe I just don't know the magic phrase.
Anyway I tried different styles for the parent node and the ImageBundle.
Sadly it seems to always want to fill the entire container or most of the container.
The way I am doing it at the moment is the following:

Generate the ImageBundle for later insertion

let context_menu_decoration: Vec<Entity> = vec![
        commands
            .spawn(ImageBundle {
                style: Style {
                    max_size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
                    // align_items: AlignItems::Center,
                    // justify_content: JustifyContent::SpaceAround,
                    ..default()
                },
                calculated_size: CalculatedSize {
                    preserve_aspect_ratio: true,
                    ..default()
                },
                image: UiImage {
                    texture: asset_server.load("textures/ui/greek/context_menu_decoration.png"),
                    ..default()
                },
                ..default()
            })
            .id()];

Function to create a UI segment (used because I want a background foreground)

fn create_ui_segment(
    commands: &mut Commands,
    style: Style,
    ui_type: UIType,
    content: Vec<Entity>,
    decoration: Vec<Entity>,
) -> Entity {
    commands
        .spawn((NodeBundle { style, ..default() },))
        .with_children(|parent| {
            parent
                .spawn((
                    UIContent::Decoration(ui_type),
                    NodeBundle {
                        style: Style {
                            size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
                            position_type: PositionType::Absolute,
                            align_items: AlignItems::Center,
                            justify_content: JustifyContent::Center,
                            // align_content: AlignContent::SpaceBetween,
                            // flex_wrap: FlexWrap::Wrap,
                            flex_direction: FlexDirection::Row,
                            ..default()
                        },
                        // background_color: Color::rgba(0.0, 0.0, 1.0, 0.5).into(),
                        ..default()
                    },
                ))
                .push_children(&decoration);
        })
        .id()
}

Actual Invocation

parent
                .spawn(NodeBundle {
                    style: Style {
                        size: Size::new(Val::Percent(100.0), Val::Percent(15.0)),
                        position: UiRect {
                            top: Val::Percent(80.0),
                            left: Val::Px(0.0),
                            ..default()
                        },
                        // align_items: AlignItems::Center,
                        justify_content: JustifyContent::SpaceBetween,
                        flex_wrap: FlexWrap::Wrap,
                        align_content: AlignContent::SpaceBetween,
                        ..default()
                    },
                    // background_color: Color::rgba(1.0, 1.0, 1.0, 0.5).into(),
                    ..default()
                })
                .push_children(&vec![
create_ui_segment(
            &mut commands,
            Style {
                size: Size::new(Val::Percent(30.0), Val::Percent(100.0)),
                position: UiRect {
                    top: Val::Percent(0.0),
                    left: Val::Px(0.0),
                    ..default()
                },
                align_items: AlignItems::Start,
                justify_content: JustifyContent::Start,
                ..default()
            },
            UIType::ContextMenu,
            Vec::new(),
            context_menu_decoration,
        )]);

I would expect this to give me the imagebundle in the center with the correct aspect ratio but instead it fills almost the entire nodebundle (which also confuses me, as I would have expected to fill the entire nodebundle and not leave space left and right).

Can anyone tell me where I'm making the mistake? Thanks in advance!