From ba6322ec2bb975f15389fe0700816bf671c6819d Mon Sep 17 00:00:00 2001
From: Hannah <hannahblair@users.noreply.github.com>
Date: Wed, 21 Aug 2024 19:41:40 +0200
Subject: [PATCH] Fix image height content fit (#9116)

* fix image height content fit

* add changeset

* use `scale-down` instead of `contain`

* add changeset

* fix spacing

* apply image uploader styling to image preview

* Fix image/shared/ImagePreview style

* Fix

* Remove unnecessary styles from .image-frame

* Revert prev for the fullscreen mode

* Add stories

* fix python test

* move story files, fix python tests

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Yuichiro Tachibana (Tsuchiya) <t.yic.yt@gmail.com>
---
 .changeset/poor-days-eat.md                 |   8 +++++
 js/image/Image.stories.svelte               |  37 ++++++++++++++++++++
 js/image/shared/ImagePreview.svelte         |  23 ++++++++----
 js/image/shared/ImageUploader.svelte        |  13 +++++--
 js/simpleimage/shared/ImagePreview.svelte   |   2 +-
 js/simpleimage/shared/ImageUploader.svelte  |   2 +-
 js/storybook/test_files/image_100x100.webp  | Bin 0 -> 318 bytes
 js/storybook/test_files/image_100x1000.webp | Bin 0 -> 790 bytes
 8 files changed, 74 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/poor-days-eat.md
 create mode 100644 js/storybook/test_files/image_100x100.webp
 create mode 100644 js/storybook/test_files/image_100x1000.webp

diff --git a/.changeset/poor-days-eat.md b/.changeset/poor-days-eat.md
new file mode 100644
index 0000000000000..533b64d2e9530
--- /dev/null
+++ b/.changeset/poor-days-eat.md
@@ -0,0 +1,8 @@
+---
+"@gradio/image": patch
+"@gradio/simpleimage": patch
+"@gradio/storybook": patch
+"gradio": patch
+---
+
+fix:Fix image height content fit
diff --git a/js/image/Image.stories.svelte b/js/image/Image.stories.svelte
index 9e26168498c2e..e4f0beb69ee1d 100644
--- a/js/image/Image.stories.svelte
+++ b/js/image/Image.stories.svelte
@@ -3,6 +3,8 @@
 	import StaticImage from "./Index.svelte";
 	import { userEvent, within } from "@storybook/test";
 	import { allModes } from "../storybook/modes";
+	import image_file_100x100 from "../storybook/test_files/image_100x100.webp";
+	import image_file_100x1000 from "../storybook/test_files/image_100x100.webp";
 
 	export const meta = {
 		title: "Components/Image",
@@ -64,6 +66,41 @@
 	}}
 />
 
+<Story
+	name="static with a vertically long image"
+	args={{
+		value: {
+			path: image_file_100x1000,
+			url: image_file_100x1000,
+			orig_name: "image.webp"
+		}
+	}}
+/>
+
+<Story
+	name="static with a vertically long image and a fixed height"
+	args={{
+		value: {
+			path: image_file_100x1000,
+			url: image_file_100x1000,
+			orig_name: "image.webp"
+		},
+		height: "500px"
+	}}
+/>
+
+<Story
+	name="static with a small image and a fixed height"
+	args={{
+		value: {
+			path: image_file_100x100,
+			url: image_file_100x100,
+			orig_name: "image.webp"
+		},
+		height: "500px"
+	}}
+/>
+
 <Story
 	name="interactive with upload, clipboard, and webcam"
 	args={{
diff --git a/js/image/shared/ImagePreview.svelte b/js/image/shared/ImagePreview.svelte
index dfc84bc4d307c..3a93ad5a3a119 100644
--- a/js/image/shared/ImagePreview.svelte
+++ b/js/image/shared/ImagePreview.svelte
@@ -99,7 +99,7 @@
 			{/if}
 		</div>
 		<button on:click={handle_click}>
-			<div class:selectable>
+			<div class:selectable class="image-frame">
 				<Image src={value.url} alt="" loading="lazy" on:load />
 			</div>
 		</button>
@@ -111,12 +111,10 @@
 		height: 100%;
 		position: relative;
 	}
-	.image-container :global(img),
-	button {
+
+	.image-container button {
 		width: var(--size-full);
 		height: var(--size-full);
-		object-fit: contain;
-		display: block;
 		border-radius: var(--radius-lg);
 
 		display: flex;
@@ -124,6 +122,19 @@
 		justify-content: center;
 	}
 
+	.image-frame {
+		width: auto;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.image-frame :global(img) {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: scale-down;
+	}
+
 	.selectable {
 		cursor: crosshair;
 	}
@@ -152,6 +163,6 @@
 	:global(.image-container:fullscreen img) {
 		max-width: 90vw;
 		max-height: 90vh;
-		object-fit: contain;
+		object-fit: scale-down;
 	}
 </style>
diff --git a/js/image/shared/ImageUploader.svelte b/js/image/shared/ImageUploader.svelte
index 17317c621e01f..68f79961e4cb2 100644
--- a/js/image/shared/ImageUploader.svelte
+++ b/js/image/shared/ImageUploader.svelte
@@ -109,7 +109,11 @@
 			}}
 		/>
 	{/if}
-	<div class="upload-container" class:reduced-height={sources.length > 1}>
+	<div
+		class="upload-container"
+		class:reduced-height={sources.length > 1}
+		style:width={value ? "auto" : "100%"}
+	>
 		<Upload
 			hidden={value !== null || active_source === "webcam"}
 			bind:this={upload_input}
@@ -165,7 +169,7 @@
 	.image-frame :global(img) {
 		width: var(--size-full);
 		height: var(--size-full);
-		object-fit: contain;
+		object-fit: scale-down;
 	}
 
 	.image-frame {
@@ -175,10 +179,13 @@
 	}
 
 	.upload-container {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
 		height: 100%;
 		flex-shrink: 1;
 		max-height: 100%;
-		width: 100%;
 	}
 
 	.reduced-height {
diff --git a/js/simpleimage/shared/ImagePreview.svelte b/js/simpleimage/shared/ImagePreview.svelte
index c53589b060ead..f522c92a79be7 100644
--- a/js/simpleimage/shared/ImagePreview.svelte
+++ b/js/simpleimage/shared/ImagePreview.svelte
@@ -45,7 +45,7 @@
 	button {
 		width: var(--size-full);
 		height: var(--size-full);
-		object-fit: contain;
+		object-fit: scale-down;
 		display: block;
 		border-radius: var(--radius-lg);
 	}
diff --git a/js/simpleimage/shared/ImageUploader.svelte b/js/simpleimage/shared/ImageUploader.svelte
index 79038b4be44d6..927c7628f46b9 100644
--- a/js/simpleimage/shared/ImageUploader.svelte
+++ b/js/simpleimage/shared/ImageUploader.svelte
@@ -74,7 +74,7 @@
 	.image-frame :global(img) {
 		width: var(--size-full);
 		height: var(--size-full);
-		object-fit: contain;
+		object-fit: scale-down;
 	}
 
 	.image-frame {
diff --git a/js/storybook/test_files/image_100x100.webp b/js/storybook/test_files/image_100x100.webp
new file mode 100644
index 0000000000000000000000000000000000000000..02ff1638c8944796f76d5a9e8caca0f2d15a0e50
GIT binary patch
literal 318
zcmV-E0m1%KNk&FC0RRA3MM6+kP&gne0RRB72>_h|Dr5j;06uLnkVT{;A(n;6KnBFI
z0BKK1KP0$7d;kF-%%z8W=z(Sii6xI?uS#}jvDc+LGuZ3Wotf-)=}s_s&q3ZI=JqOg
zSOD*pi-B$70092-nD6fg$L;<*Uxxc_B};OoI3HHnsz3f35f68lhf-I=AOGLU!=B&$
z|9?G&!Tl{C@N53f|E4$o1XcEVcu@m%ZqgSqa%CTWpV~!Sha|}QP_H}OfDg!Ji<(&<
z)<}j@<AL@6<lN>ssBU$2jWEBkXSIbw0ud+Yl>ol*PLOcH7_tf6iu4^yg9h#m*jYpo
z;o+boCA&5oybx3qwX4#N|L|KtkH6UD$|9Q?pze?}#_NaRL8A4Kt@L--_3RH)7yA*g
Q&vLLA->0Fw@G)5c07=N1&Hw-a

literal 0
HcmV?d00001

diff --git a/js/storybook/test_files/image_100x1000.webp b/js/storybook/test_files/image_100x1000.webp
new file mode 100644
index 0000000000000000000000000000000000000000..7f6961650332ebd7b37964600eda61485dea0bf9
GIT binary patch
literal 790
zcmWIYbaUflW?%?+bqWXzuuxzEvM1;=%w^O{VR*r8muoV~T}4@Oq2|g34ZNMcck~WO
zFJ-vw_*3;K;|W&xHx1p|cS0H8G=vKY-kvw5)5Tlm&zTzePc^@9T=UrW$D(+1&ezwX
zoAf94t~TPCW}kTKmu~p=)ZKakjWa(>3152M`$uF-0{0)+6;aEb^Q+(0nO|6OK>SB{
zz*fJud*AQ;$zK@Qp#M>9Vb)yUz3+GaxbL)>A^wrB(^V_!>ifkX_qDn)>^~CKx~jzN
z`@ZLoYq@$D>pQk`hrGyrUwi)8FHs4m|AJX!D=*x>_j`Wt7cB$Ue@a($gBNb!``upp
zMaZDAwy%jnfnCqwhv5Mm28Ms1X1ssTe*En}>-e_cxvJhpODyEWZmhCzZ*ji+^x>7M
z?;Za)sPk3V{bhfn$EzoQaQ$!dYwrJ8Lceu<ZxwiE^NZm_Ki8c6=e33Gi#sPj+2S<Y
zafg-ZrOz7}PP~~T?f>TgxBs8=UZ39X9V72P^RiV+b^P52OP_|^ui3ur<qO+JjrrTs
z{RFoz_>yX8v`mHjav2MI-hsCt&b&NiwneUI`LU2Aja7LE8s6TJ-6uKM!tGk~#VJ2d
z&6uF?dqY5WH}m$x#>+WwU8pjeFBvSv`f@iD^Y(<YA892IrK9-Wf*)%oIqWr0a437j
zcc16n9OZ1s7pH1ceLTdMz2V@y+j#ro%*!pg8Mc!CJu5qzzT9nOyuHD?#@MQ$cP;y3
z&5u(J72;-ZP_Qmz&u_!$#4|5Gmd`K9J9J8+pP!eJsr5qKkv~o)ufzTa{h3_*>x;d?
y4l#~@QvYx6=d^w3{piMqe=m<d<lE3!cj}2U=kZ@F??|8gD$uw8pG+150|NkO^o@A{

literal 0
HcmV?d00001