Resize Image Dynamically

app.py

@@ -157,36 +157,40 @@ if submit:
 
 st.write('##')
 
-col1, col2, col3 = st.columns([1, 10, 1], gap='small')
-with col2:
-    st.subheader('Object Prediction Result')
-    # Add custom CSS to make images responsive and add a border
-    st.markdown(
-        """
-        <style>
-        .stImageComparison > div {
-            max-width: 100%;
-            height: auto;
-            border: 3px solid #000;  /* Add a black border with 3px thickness */
-            border-radius: 10px;  /* Optional: Add rounded corners to the border */
-            padding: 5px;  /* Optional: Add padding around the images */
-        }
-        </style>
-        """, 
-        unsafe_allow_html=True
-    )
-    # Display image comparison with custom width and labels
-    image_comparison(
-        st.session_state["output_1"],
-        st.session_state["output_2"],
-        label1="Raw Diagram",
-        label2="Inference Prediction",
-        starting_position=50,
-        show_labels=True,
-        make_responsive=True,
-        in_memory=True 
-    )
-    
+# Optional: Add a subtitle for extra description
+st.subheader("Compare the two images below:")
+
+# Use custom CSS to make the image comparison widget responsive
+st.markdown(
+    """
+    <style>
+    /* Target the container of the image comparison widget */
+    .stImageComparison > div {
+        width: 100%;  /* Make the container responsive */
+        max-width: 90vw;  /* Max width as 90% of the viewport width */
+        margin: 0 auto;  /* Center the widget */
+        height: auto;  /* Ensure aspect ratio is maintained */
+    }
+
+    /* Optional: Add additional styling, like border */
+    .stImageComparison > div img {
+        width: 100%;  /* Images take 100% width of the container */
+        height: auto;  /* Maintain the aspect ratio */
+        border-radius: 8px;  /* Optional: Rounded corners */
+    }
+    </style>
+    """, 
+    unsafe_allow_html=True
+)
+
+# Display the image comparison widget with the resized images
+image_comparison(
+    st.session_state["output_1"],
+    st.session_state["output_2"]
+)
+
+#col1, col2, col3 = st.columns([1, 10, 1], gap='small')
+#with col2:  
     #st.markdown(f"#### Object Detection Result")
     #with st.container(border = True):
     #    static_component = image_comparison(