Resize Image Dynamically

app.py

@@ -160,23 +160,28 @@ st.write('##')
 # Optional: Add a subtitle for extra description
 st.subheader("Compare the two images below:")
 
+# Use custom CSS to make the image comparison widget responsive
 # Use custom CSS to make the image comparison widget responsive
 st.markdown(
     """
     <style>
-    /* Target the container of the image comparison widget */
+    /* Style the image comparison container */
     .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 */
+        width: 100%;             /* Make the container responsive */
+        max-width: 90vw;         /* Max width as 90% of the viewport width */
+        margin-left: auto;       /* Center the widget horizontally */
+        margin-right: auto;
+        padding: 10px;           /* Optional padding around the images */
+        border: 3px solid #000;  /* Add a black border around the widget */
+        border-radius: 10px;     /* Optional: Rounded corners */
+        background-color: #f7f7f7;  /* Optional: Background color for contrast */
     }
 
-    /* Optional: Add additional styling, like border */
+    /* Target the images inside the comparison */
     .stImageComparison > div img {
-        width: 100%;  /* Images take 100% width of the container */
-        height: auto;  /* Maintain the aspect ratio */
-        border-radius: 8px;  /* Optional: Rounded corners */
+        width: 100%;      /* Images take up 100% of the container's width */
+        height: auto;     /* Maintain aspect ratio */
+        border-radius: 8px; /* Optional: Rounded corners for images */
     }
     </style>
     """,