fix: 修复商品图片居中显示

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

frontend/src/views/user/ProductDetail.vue

@@ -143,28 +143,27 @@ function buyNow() {
   background: rgba(255, 255, 255, 0.04);
   border-radius: 12px;
   overflow: hidden;
-  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   .carousel-image, .single-image {
-    width: 100%;
-    height: 100%;
-    display: block;
-
-    // 约束 el-image 组件
-    :deep(.el-image) {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
+
+    // 约束 el-image 组件
+    :deep(.el-image) {
+      max-width: 100%;
+      max-height: 100%;
     }
 
-    // 确保图片按比例缩放显示
+    // 确保图片按比例缩放显示并居中
     :deep(.el-image__inner) {
       max-width: 100%;
       max-height: 100%;
-      width: auto;
-      height: auto;
       object-fit: contain;
     }
   }