From 1405e133837e9a65148596f340f2dfd00e6b8819 Mon Sep 17 00:00:00 2001
From: admin <admin@viaeon.com>
Date: Wed, 10 Jun 2026 23:05:35 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E8=B6=85=E5=87=BA=E5=AE=B9=E5=99=A8=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98,=E7=BA=A6=E6=9D=9Fel-image=E7=BB=84=E4=BB=B6=E5=B0=BA?=
 =?UTF-8?q?=E5=AF=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/views/user/ProductDetail.vue | 29 +++++++++++++----------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/user/ProductDetail.vue b/frontend/src/views/user/ProductDetail.vue
index 4cd94b5..9164dff 100644
--- a/frontend/src/views/user/ProductDetail.vue
+++ b/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 {