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

Code before:
            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),
                        ..default()
                    },
                    BackgroundColor(Color::from(tailwind::BLUE_100)),
                ))
                .with_children(|parent| {
                    for width in [10., 20., 30., 40.] {
                        parent.spawn((
                            Node {
                                height: Val::Percent(100.),
                                width: Val::Percent(width),
                                ..default()
                            },
                            ImageNode {
                                image: image_handle.clone(),
                                image_mode: NodeImageMode::Stretch,
                                ..default()
                            },

Review comment (suggestion):
```suggestion
            // `NodeImageMode::Stretch` will resize the image to match the size of the `Node` component
```

Code after:
                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),
        ))
        .with_children(|builder| {
            // `NodeImageMode::Auto` will resize the image 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_INIT_WIDTH),
                        height: Val::Percent(IMAGE_GROUP_BOX_INIT_HEIGHT),
                        ..default()
                    },
                    BackgroundColor(Color::from(tailwind::BLUE_100)),
                ))
                .with_children(|parent| {
                    for _ in 0..4 {
                        // child node will apply Flex layout