Update app.py

app.py

@@ -76,22 +76,34 @@ def run_example(image):
 
 
 css = """
-  #output {
+#output {
     height: 500px; 
     overflow: auto; 
     border: 1px solid #ccc; 
-  }
-  #col-container {
+}
+
+#col-container {
     margin: 0 auto;
-    max-width: auto;
+    max-width: 100%; /* 确保容器宽度不超过父元素 */
     max-height: 360px;
-    object-fit: contain;
+    display: flex; /* 使用 flexbox 布局 */
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    overflow: hidden; /* 隐藏超出容器的内容 */
+}
+
+#col-container img {
+    max-width: 100%; /* 图像宽度不超过容器 */
+    max-height: 100%; /* 图像高度不超过容器 */
+    object-fit: contain; /* 保持图像比例，完全显示图像 */
+}
 """
 
 with gr.Blocks(css=css) as demo:
     gr.Markdown(TITLE)
-    input_img = gr.Image(elem_id="col-container",container=True,height="360",label="Input Picture")
+    input_img = gr.Image(elem_id="col-container", height="auto", label="Input Picture")
     submit_btn = gr.Button(value="Submit")
     output_text = gr.Textbox(label="Output Text")
     submit_btn.click(run_example, [input_img], [output_text])
-demo.launch(debug=True)
+
+demo.launch(debug=True)