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

@@ -0,0 +1,8 @@
+---
+"@gradio/image": patch
+"@gradio/simpleimage": patch
+"@gradio/storybook": patch
+"gradio": patch
+---
+
+fix:Fix image height content fit

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={{

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,19 +111,30 @@
 		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;
 		align-items: center;
 		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>

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 {

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);
 	}

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 {