Repository: bevyengine/bevy
File: examples/ui/image_node_resizing.rs (Rust)

Code before:
                ..default()
            },
        ))
        .observe(update_text);

    commands
        .spawn((Node {
            display: Display::Flex,
            flex_direction: FlexDirection::Column,
            justify_content: JustifyContent::SpaceAround,
            width: percent(100),
            height: percent(100),
            padding: UiRect::all(Val::Px(10.)),
            ..default()
        },))
        .with_children(|builder| {
            // `NodeImageMode::Auto` will be sized automatically by taking the size of the source image and applying any layout constraints.
            builder
                .spawn((
                    ImageGroup,
                    Node {
                        display: Display::Flex,
                        justify_content: JustifyContent::Start,
                        width: Val::Percent(IMAGE_GROUP_BOX_MAX_WIDTH),
                        height: Val::Percent(IMAGE_GROUP_BOX_MAX_HEIGHT),
                        ..default()
                    },
                    BackgroundColor(Color::from(tailwind::BLUE_100)),
                ))
                .with_children(|parent| {
                    for _ in 0..4 {
                        // child node will apply Flex layout
                        parent.spawn((
                            Node::default(),
                            ImageNode {
                                image: image_handle.clone(),
                                image_mode: NodeImageMode::Auto,
                                ..default()
                            },
                        ));
                    }
                });
            // `NodeImageMode::Stretch` will resized to match the size of the `Node` component
            builder
                .spawn((
                    ImageGroup,
                    Node {
                        display: Display::Flex,
                        justify_content: JustifyContent::Start,
                        width: Val::Percent(IMAGE_GROUP_BOX_MAX_WIDTH),
                        height: Val::Percent(IMAGE_GROUP_BOX_MAX_HEIGHT),

Review comment (bug):
`UiDebugOptions` is a component too, you could use it to disable the distracting outline around the text.

```suggestion
            },
            UiDebugOptions {
                enabled: false,
                ..default()
            },
```

Code after:
        .spawn((
            Node {
                display: Display::Grid,
                width: percent(100),
                height: percent(100),
                grid_template_rows: vec![GridTrack::min_content(), GridTrack::flex(1.0)],
                ..default()
            },
            BackgroundColor(Color::WHITE),
        ))
        .id();

    // Keyboard Text
    commands
        .spawn((
            TextData {
                height: IMAGE_GROUP_BOX_INIT_HEIGHT,
                width: IMAGE_GROUP_BOX_INIT_WIDTH,
            },
            Text::new(full_text),
            TextColor::BLACK,
            Node {
                grid_row: GridPlacement::span(1),
                padding: UiRect::all(px(6)),
                ..default()
            },
            UiDebugOptions {
                enabled: false,
                ..default()
            },
            UiDebugOptions {
                enabled: false,
                ..default()
            },
            ChildOf(container),
        ))
        .observe(update_text);

    commands
        .spawn((
            Node {
                display: Display::Flex,
                grid_row: GridPlacement::span(1),
                flex_direction: FlexDirection::Column,
                justify_content: JustifyContent::SpaceAround,
                padding: UiRect::all(Val::Px(10.)),
                ..default()
            },
            BackgroundColor(Color::BLACK),
            ChildOf(container),
        ))