Matcha 2

app.py

@@ -74,18 +74,25 @@ def get_base_filename(filepath):
 def create_demo():
     # --- Reintroduce CSS ---
     custom_css = """
-    /* Target the img element *inside* the component with ID 'current-image-display' */
-    #current-image-display img {
-        object-fit: contain !important; /* Scale down while maintaining aspect ratio */
-        width: 100% !important; /* Make image width fill the container */
-        height: 100% !important; /* Make image height fill the container */
-    }
-    /* Optional: Ensure the container itself respects the height */
-    #current-image-display {
-         height: 600px; /* Match the height set in gr.Image */
-         /* width: 100%; /* Usually takes column width */
-         /* overflow: hidden; /* Can prevent potential overflow */
-    }
+    /* Container for the image component (#current-image-display is the elem_id of gr.Image) */
+        #current-image-display {
+            height: 600px;           /* Define container height */
+            width: 100%;             /* Define container width (takes column width) */
+            display: flex;           /* Use flexbox for alignment */
+            justify-content: center; /* Center content horizontally */
+            align-items: center;     /* Center content vertically */
+            overflow: hidden;        /* Hide any potential overflow from container */
+        }
+    
+        /* The actual <img> element inside the container */
+        #current-image-display img {
+            object-fit: contain;    /* Scale keeping aspect ratio, within bounds */
+            max-width: 100%;        /* Prevent image exceeding container width */
+            max-height: 100%;       /* Prevent image exceeding container height */
+            width: auto;            /* Use natural width unless constrained by max-width */
+            height: auto;           /* Use natural height unless constrained by max-height */
+            display: block;         /* Ensure image behaves predictably in flex */
+        }
     """
     # --- Pass css to gr.Blocks ---
     with gr.Blocks(theme=gr.themes.Monochrome(), css=custom_css) as demo: