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

Code before:
                        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 resize the image 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()
                            },
                        ));
                    }
                });
        });
}

// Trigger event

Review comment (suggestion):
```suggestion
                        width: Val::Percent(IMAGE_GROUP_BOX_INIT_WIDTH),
```

Code after:
                    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
                        parent.spawn((
                            Node::default(),
                            ImageNode {
                                image: image_handle.clone(),
                                image_mode: NodeImageMode::Auto,
                                ..default()
                            },
                        ));
                    }
                });
            // `NodeImageMode::Stretch` will resize the image 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_INIT_WIDTH),
                        height: Val::Percent(IMAGE_GROUP_BOX_INIT_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()
                            },
                        ));
                    }
                });