fix: 修复商品图片超出容器问题,约束el-image组件尺寸

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/views/user/ProductDetail.vue

@@ -143,19 +143,28 @@ function buyNow() {
   background: rgba(255, 255, 255, 0.04);
   border-radius: 12px;
   overflow: hidden;
+  position: relative;
 
   .carousel-image, .single-image {
     width: 100%;
-    height: 400px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
+    height: 100%;
+    display: block;
+
+    // 约束 el-image 组件
+    :deep(.el-image) {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
 
     // 确保图片按比例缩放显示
     :deep(.el-image__inner) {
       max-width: 100%;
       max-height: 100%;
+      width: auto;
+      height: auto;
       object-fit: contain;
     }
   }
@@ -221,14 +230,10 @@ h1 { font-size: 28px; color: #fff; margin-bottom: 16px; }
 
   .product-images {
     height: 300px;
-  }
 
-  .carousel-image, .single-image {
-    height: 300px;
-  }
-
-  .image-placeholder {
-    height: 300px;
+    .image-placeholder {
+      height: 300px;
+    }
   }
 
   h1 {