1 files changed, 59 insertions, 21 deletions

diff --git a/examples/tour/src/main.rs b/examples/tour/src/main.rs
index b01a1ce2..2024d25a 100644
--- a/examples/tour/src/main.rs
+++ b/examples/tour/src/main.rs
@@ -1,7 +1,7 @@
 use iced::{
     alignment, button, scrollable, slider, text_input, Button, Checkbox, Color,
-    Column, Container, Element, Image, Length, Radio, Row, Sandbox, Scrollable,
-    Settings, Slider, Space, Text, TextInput, Toggler,
+    Column, Container, ContentFit, Element, Image, Length, Radio, Row, Sandbox,
+    Scrollable, Settings, Slider, Space, Text, TextInput, Toggler,
 };
 
 pub fn main() -> iced::Result {
@@ -139,7 +139,8 @@ impl Steps {
                     can_continue: false,
                 },
                 Step::Image {
-                    width: 300,
+                    height: 200,
+                    current_fit: ContentFit::Contain,
                     slider: slider::State::new(),
                 },
                 Step::Scrollable,
@@ -213,8 +214,9 @@ enum Step {
         can_continue: bool,
     },
     Image {
-        width: u16,
+        height: u16,
         slider: slider::State,
+        current_fit: ContentFit,
     },
     Scrollable,
     TextInput {
@@ -234,7 +236,8 @@ pub enum StepMessage {
     TextSizeChanged(u16),
     TextColorChanged(Color),
     LanguageSelected(Language),
-    ImageWidthChanged(u16),
+    ImageHeightChanged(u16),
+    ImageFitSelected(ContentFit),
     InputChanged(String),
     ToggleSecureInput(bool),
     DebugToggled(bool),
@@ -279,9 +282,14 @@ impl<'a> Step {
                     *spacing = new_spacing;
                 }
             }
-            StepMessage::ImageWidthChanged(new_width) => {
-                if let Step::Image { width, .. } = self {
-                    *width = new_width;
+            StepMessage::ImageHeightChanged(new_height) => {
+                if let Step::Image { height, .. } = self {
+                    *height = new_height;
+                }
+            }
+            StepMessage::ImageFitSelected(fit) => {
+                if let Step::Image { current_fit, .. } = self {
+                    *current_fit = fit;
                 }
             }
             StepMessage::InputChanged(new_value) => {
@@ -346,7 +354,11 @@ impl<'a> Step {
                 color_sliders,
                 color,
             } => Self::text(size_slider, *size, color_sliders, *color),
-            Step::Image { width, slider } => Self::image(*width, slider),
+            Step::Image {
+                height,
+                slider,
+                current_fit,
+            } => Self::image(*height, slider, *current_fit),
             Step::RowsAndColumns {
                 layout,
                 spacing_slider,
@@ -574,23 +586,44 @@ impl<'a> Step {
     }
 
     fn image(
-        width: u16,
+        height: u16,
         slider: &'a mut slider::State,
+        current_fit: ContentFit,
     ) -> Column<'a, StepMessage> {
+        const FIT_MODES: [(ContentFit, &str); 3] = [
+            (ContentFit::Contain, "Contain"),
+            (ContentFit::Cover, "Cover"),
+            (ContentFit::Fill, "Fill"),
+        ];
+
+        let mode_selector = FIT_MODES.iter().fold(
+            Column::new().padding(10).spacing(20),
+            |choices, (mode, name)| {
+                choices.push(Radio::new(
+                    *mode,
+                    *name,
+                    Some(current_fit),
+                    StepMessage::ImageFitSelected,
+                ))
+            },
+        );
+
         Self::container("Image")
-            .push(Text::new("An image that tries to keep its aspect ratio."))
-            .push(ferris(width))
+            .push(Text::new("Pictures of things in all shapes and sizes!"))
+            .push(ferris(height, current_fit))
             .push(Slider::new(
                 slider,
-                100..=500,
-                width,
-                StepMessage::ImageWidthChanged,
+                50..=500,
+                height,
+                StepMessage::ImageHeightChanged,
             ))
             .push(
-                Text::new(format!("Width: {} px", width.to_string()))
+                Text::new(format!("Height: {} px", height))
                     .width(Length::Fill)
                     .horizontal_alignment(alignment::Horizontal::Center),
             )
+            .push(Text::new("Pick a content fit strategy:"))
+            .push(mode_selector)
     }
 
     fn scrollable() -> Column<'a, StepMessage> {
@@ -613,7 +646,7 @@ impl<'a> Step {
                     .horizontal_alignment(alignment::Horizontal::Center),
             )
             .push(Column::new().height(Length::Units(4096)))
-            .push(ferris(300))
+            .push(ferris(200, ContentFit::Contain))
             .push(
                 Text::new("You made it!")
                     .width(Length::Fill)
@@ -699,7 +732,10 @@ impl<'a> Step {
     }
 }
 
-fn ferris<'a>(width: u16) -> Container<'a, StepMessage> {
+fn ferris<'a>(
+    height: u16,
+    content_fit: ContentFit,
+) -> Container<'a, StepMessage> {
     Container::new(
         // This should go away once we unify resource loading on native
         // platforms
@@ -708,10 +744,11 @@ fn ferris<'a>(width: u16) -> Container<'a, StepMessage> {
         } else {
             Image::new(format!(
                 "{}/images/ferris.png",
-                env!("CARGO_MANIFEST_DIR")
+                env!("CARGO_MANIFEST_DIR"),
             ))
         }
-        .width(Length::Units(width)),
+        .height(Length::Units(height))
+        .content_fit(content_fit),
     )
     .width(Length::Fill)
     .center_x()
@@ -783,7 +820,8 @@ pub enum Layout {
 }
 
 mod style {
-    use iced::{button, Background, Color, Vector};
+    use iced::button;
+    use iced::{Background, Color, Vector};
 
     pub enum Button {
         Primary,