Update app/building_information.py

app/building_information.py

@@ -293,28 +293,22 @@ def display_building_info_help():
 def display_orientation_diagram():
     """Display orientation images showing building orientation."""
     col1, col2 = st.columns(2)
-
+    
     with col1:
         st.markdown(
-            """
-            <div style="display: flex; justify-content: center; align-items: center;">
-                <img src="images/orientation1.jpg" width="300" />
-            </div>
-            <p style="text-align: center;">Building Orientation Angle = 0</p>
-            """,
+            '<div style="display: flex; justify-content: center; align-items: center; width: 100%; text-align: center; margin: 0 auto;">',
             unsafe_allow_html=True
         )
-
+        st.image("images/orientation1.jpg", caption="Building Orientation Angle = 0", width=300, use_column_width=False, output_format="auto")
+        st.markdown('</div>', unsafe_allow_html=True)
+    
     with col2:
         st.markdown(
-            """
-            <div style="display: flex; justify-content: center; align-items: center;">
-                <img src="images/orientation2.jpg" width="300" />
-            </div>
-            <p style="text-align: center;">Building Orientation Angle = 45</p>
-            """,
+            '<div style="display: flex; justify-content: center; align-items: center; width: 100%; text-align: center; margin: 0 auto;">',
             unsafe_allow_html=True
         )
+        st.image("images/orientation2.jpg", caption="Building Orientation Angle = 45", width=300, use_column_width=False, output_format="auto")
+        st.markdown('</div>', unsafe_allow_html=True)
 
 def calculate_volume(floor_area: float, height: float) -> float:
     """