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

Code before:
    height: f32,
    width: f32,
}

#[derive(Debug)]
enum Direction {
    Height,
    Width,
}

#[derive(Debug, EntityEvent)]
struct TextUpdate {
    entity: Entity,
    direction: Direction,
    change: f32,
}

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    let image_handle = asset_server.load("branding/icon.png");
    commands.spawn(Camera2d);
    // Keyboard Text
    commands
        .spawn((
            TextData { height: IMAGE_GROUP_BOX_MAX_HEIGHT,  width : IMAGE_GROUP_BOX_MAX_WIDTH },
            Text::new(
                "Compare NodeImageMode(Auto, Stretch) press `Upload`/`Down` to resize height, press `Left`/`Right` to resize width\nheight : 10%",
            ),
            TextColor::WHITE,
            Node {
                position_type: PositionType::Absolute,
                top: px(4),
                left: px(4),
                ..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((

Review comment (suggestion):
The initial percentage values of height and width are 40% and 100% respectively, right?
(If you change the initial values like I suggest in my summary comment, you’ll probably have to change these to those updated values)
```suggestion
                "Compare NodeImageMode(Auto, Stretch) press `Up`/`Down` to resize height, press `Left`/`Right` to resize width\nheight : 40%, width : 100%",
```

Code after:
}

// Text data for easy modification
#[derive(Debug, Component)]
struct TextData {
    height: f32,
    width: f32,
}

#[derive(Debug)]
enum Direction {
    Height,
    Width,
}

#[derive(Debug, EntityEvent)]
struct TextUpdate {
    entity: Entity,
    direction: Direction,
    change: f32,
}

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    let image_handle = asset_server.load("branding/icon.png");
    let full_text = format!(
        "{}height : {}%, width : {}%",
        TEXT_PREFIX, IMAGE_GROUP_BOX_INIT_HEIGHT, IMAGE_GROUP_BOX_INIT_WIDTH,
    );

    commands.spawn(Camera2d);

    let container = commands
        .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,
            },