Update index.html

index.html

@@ -296,18 +296,18 @@ <h2 class="subtitle has-text-centered">
       <!-- 图片展示 -->
       <div id="results-grid" class="columns is-centered is-multiline">
         <div class="column is-one-third">
-          <figure class="image is-square">
-            <img src="./static/images/more_result_chair.png" alt="Chair Image" height="100%" class="result-image">
+          <figure class="image">
+            <img src="./static/images/more_result_chair.png" alt="Chair Image" class="result-image">
           </figure>
         </div>
         <div class="column is-one-third">
-          <figure class="image is-square">
-            <img src="./static/images/more_result_hotdog.png" alt="Hotdog Image" height="100%" class="result-image">
+          <figure class="image">
+            <img src="./static/images/more_result_hotdog.png" alt="Hotdog Image" class="result-image">
           </figure>
         </div>
         <div class="column is-one-third">
-          <figure class="image is-square">
-            <img src="./static/images/more_result_mic.png" alt="Mic Image" height="100%" class="result-image">
+          <figure class="image">
+            <img src="./static/images/more_result_mic.png" alt="Mic Image" class="result-image">
           </figure>
         </div>
       </div>
@@ -316,16 +316,26 @@ <h2 class="subtitle has-text-centered">
 
 <!--   <style>
     .result-image {
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 可选：图片阴影 */
-      border: 1px solid #ddd; /* 可选：添加边框 */
-      padding: 5px; /* 可选：图片内边距 */
+      max-width: 100%; /* 图片宽度不超过父容器 */
+      height: auto; /* 高度自动调整，保持比例 */
+      display: block; /* 确保图片占据独立一行 */
+      margin: 0 auto; /* 图片水平居中 */
+    }
+
+    #results-grid {
+      margin-top: 20px; /* 图片与上方内容的间距 */
+    }
+
+    .column {
+      text-align: center; /* 图片和文字居中 */
     }
   </style> -->
 </section>
 
 
 
 
+
 
 <section class="hero is-light is-small">
   <div class="hero-body">