diff --git a/crates/gpui/examples/image/image.rs b/crates/gpui/examples/image/image.rs
index 157dbdf70f..24a94bf746 100644
--- a/crates/gpui/examples/image/image.rs
+++ b/crates/gpui/examples/image/image.rs
@@ -69,25 +69,51 @@ struct ImageShowcase {
 impl Render for ImageShowcase {
     fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
         div()
-            .flex()
-            .flex_row()
             .size_full()
+            .flex()
+            .flex_col()
             .justify_center()
             .items_center()
             .gap_8()
             .bg(rgb(0xFFFFFF))
-            .child(ImageContainer::new(
-                "Image loaded from a local file",
-                self.local_resource.clone(),
-            ))
-            .child(ImageContainer::new(
-                "Image loaded from a remote resource",
-                self.remote_resource.clone(),
-            ))
-            .child(ImageContainer::new(
-                "Image loaded from an asset",
-                self.asset_resource.clone(),
-            ))
+            .child(
+                div()
+                    .flex()
+                    .flex_row()
+                    .justify_center()
+                    .items_center()
+                    .gap_8()
+                    .child(ImageContainer::new(
+                        "Image loaded from a local file",
+                        self.local_resource.clone(),
+                    ))
+                    .child(ImageContainer::new(
+                        "Image loaded from a remote resource",
+                        self.remote_resource.clone(),
+                    ))
+                    .child(ImageContainer::new(
+                        "Image loaded from an asset",
+                        self.asset_resource.clone(),
+                    )),
+            )
+            .child(
+                div()
+                    .flex()
+                    .flex_row()
+                    .gap_8()
+                    .child(
+                        div()
+                            .flex_col()
+                            .child("Auto Width")
+                            .child(img("https://picsum.photos/800/400").h(px(180.))),
+                    )
+                    .child(
+                        div()
+                            .flex_col()
+                            .child("Auto Height")
+                            .child(img("https://picsum.photos/480/640").w(px(180.))),
+                    ),
+            )
     }
 }
 
diff --git a/crates/gpui/src/elements/img.rs b/crates/gpui/src/elements/img.rs
index 63236d5309..58ee639265 100644
--- a/crates/gpui/src/elements/img.rs
+++ b/crates/gpui/src/elements/img.rs
@@ -1,7 +1,7 @@
 use crate::{
     px, AbsoluteLength, AppContext, Asset, Bounds, DefiniteLength, Element, ElementId,
     GlobalElementId, Hitbox, Image, InteractiveElement, Interactivity, IntoElement, LayoutId,
-    Length, ObjectFit, Pixels, RenderImage, SharedString, SharedUri, Size, StyleRefinement, Styled,
+    Length, ObjectFit, Pixels, RenderImage, SharedString, SharedUri, StyleRefinement, Styled,
     SvgSize, UriOrPath, WindowContext,
 };
 use futures::{AsyncReadExt, Future};
@@ -187,16 +187,30 @@ impl Element for Img {
 
                         let image_size = data.size(frame_index);
 
-                        if let (Length::Auto, Length::Auto) = (style.size.width, style.size.height)
-                        {
-                            style.size = Size {
-                                width: Length::Definite(DefiniteLength::Absolute(
-                                    AbsoluteLength::Pixels(px(image_size.width.0 as f32)),
-                                )),
-                                height: Length::Definite(DefiniteLength::Absolute(
-                                    AbsoluteLength::Pixels(px(image_size.height.0 as f32)),
-                                )),
-                            }
+                        if let Length::Auto = style.size.width {
+                            style.size.width = match style.size.height {
+                                Length::Definite(DefiniteLength::Absolute(
+                                    AbsoluteLength::Pixels(height),
+                                )) => Length::Definite(
+                                    px(image_size.width.0 as f32 * height.0
+                                        / image_size.height.0 as f32)
+                                    .into(),
+                                ),
+                                _ => Length::Definite(px(image_size.width.0 as f32).into()),
+                            };
+                        }
+
+                        if let Length::Auto = style.size.height {
+                            style.size.height = match style.size.width {
+                                Length::Definite(DefiniteLength::Absolute(
+                                    AbsoluteLength::Pixels(width),
+                                )) => Length::Definite(
+                                    px(image_size.height.0 as f32 * width.0
+                                        / image_size.width.0 as f32)
+                                    .into(),
+                                ),
+                                _ => Length::Definite(px(image_size.height.0 as f32).into()),
+                            };
                         }
 
                         if global_id.is_some() && data.frame_count() > 1 {