From c37f616c3b21e401105b3cc39636d08ad6e83eb6 Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Mon, 3 Mar 2025 19:36:27 +0800
Subject: [PATCH] gpui: Maintain `img` aspect ratio when `max_width` is set
 (#25632)

Release Notes:

- Fixed Markdown preview to display image with max width 100%.

## Before

<img width="1202" alt="image"
src="https://github.com/user-attachments/assets/359628df-8746-456f-a768-b3428923c937"
/>
<img width="750" alt="SCR-20250226-napv"
src="https://github.com/user-attachments/assets/f6154516-470e-41b2-84f5-ef0612c447ad"
/>


## After

<img width="1149" alt="image"
src="https://github.com/user-attachments/assets/2279347d-9c69-4a47-bb62-ccc8e55a98f6"
/>
<img width="520" alt="SCR-20250226-ngyz"
src="https://github.com/user-attachments/assets/03af5f14-1935-472e-822f-4c7f62630780"
/>
---
 crates/gpui/examples/image/image.rs           | 21 +++++++++++++++----
 crates/gpui/src/elements/img.rs               |  2 ++
 .../markdown_preview/src/markdown_renderer.rs | 16 ++++++++------
 3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/crates/gpui/examples/image/image.rs b/crates/gpui/examples/image/image.rs
index 28ef60655618d2316ee4470546d77ef2cb65c804..0aa17ccede95b5ede7b372cce21d7f6e6a578d81 100644
--- a/crates/gpui/examples/image/image.rs
+++ b/crates/gpui/examples/image/image.rs
@@ -74,6 +74,9 @@ struct ImageShowcase {
 impl Render for ImageShowcase {
     fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
         div()
+            .id("main")
+            .overflow_y_scroll()
+            .p_5()
             .size_full()
             .flex()
             .flex_col()
@@ -116,9 +119,21 @@ impl Render for ImageShowcase {
                         div()
                             .flex_col()
                             .child("Auto Height")
-                            .child(img("https://picsum.photos/480/640").w(px(180.))),
+                            .child(img("https://picsum.photos/800/400").w(px(180.))),
                     ),
             )
+            .child(
+                div()
+                    .flex()
+                    .flex_col()
+                    .justify_center()
+                    .items_center()
+                    .w_full()
+                    .border_1()
+                    .border_color(rgb(0xC0C0C0))
+                    .child("image with max width 100%")
+                    .child(img("https://picsum.photos/800/400").max_w_full()),
+            )
     }
 }
 
@@ -164,9 +179,7 @@ fn main() {
                 cx.new(|_| ImageShowcase {
                     // Relative path to your root project path
                     local_resource: manifest_dir.join("examples/image/app-icon.png").into(),
-
-                    remote_resource: "https://picsum.photos/512/512".into(),
-
+                    remote_resource: "https://picsum.photos/800/400".into(),
                     asset_resource: "image/color.svg".into(),
                 })
             })
diff --git a/crates/gpui/src/elements/img.rs b/crates/gpui/src/elements/img.rs
index 2ce63d7e30f9c22bff7b50f7cf9e0c5062133814..45bf4ada8eaa00195932d3bfaf08945d92dcbeeb 100644
--- a/crates/gpui/src/elements/img.rs
+++ b/crates/gpui/src/elements/img.rs
@@ -301,6 +301,8 @@ impl Element for Img {
                             }
 
                             let image_size = data.size(frame_index);
+                            style.aspect_ratio =
+                                Some(image_size.width.0 as f32 / image_size.height.0 as f32);
 
                             if let Length::Auto = style.size.width {
                                 style.size.width = match style.size.height {
diff --git a/crates/markdown_preview/src/markdown_renderer.rs b/crates/markdown_preview/src/markdown_renderer.rs
index d45795796327a894f78eab0944444ea95f01b2ed..477c846774803e44663f0d23e8c4898d9f84f3c4 100644
--- a/crates/markdown_preview/src/markdown_renderer.rs
+++ b/crates/markdown_preview/src/markdown_renderer.rs
@@ -513,12 +513,16 @@ fn render_markdown_text(parsed_new: &MarkdownParagraph, cx: &mut RenderContext)
                 let image_element = div()
                     .id(element_id)
                     .cursor_pointer()
-                    .child(img(ImageSource::Resource(image_resource)).with_fallback({
-                        let alt_text = image.alt_text.clone();
-                        {
-                            move || div().children(alt_text.clone()).into_any_element()
-                        }
-                    }))
+                    .child(
+                        img(ImageSource::Resource(image_resource))
+                            .max_w_full()
+                            .with_fallback({
+                                let alt_text = image.alt_text.clone();
+                                {
+                                    move || div().children(alt_text.clone()).into_any_element()
+                                }
+                            }),
+                    )
                     .tooltip({
                         let link = image.link.clone();
                         move |_, cx| {