From a02ae26c2dae10f31930a0f2415bf8bf55631991 Mon Sep 17 00:00:00 2001 From: admin Date: Wed, 10 Jun 2026 23:12:22 +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=E5=B1=85=E4=B8=AD=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Fable 5 --- frontend/src/views/user/ProductDetail.vue | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/frontend/src/views/user/ProductDetail.vue b/frontend/src/views/user/ProductDetail.vue index 9164dff..e9ceffe 100644 --- a/frontend/src/views/user/ProductDetail.vue +++ b/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; + display: flex; + align-items: center; + justify-content: center; // 约束 el-image 组件 :deep(.el-image) { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; + max-width: 100%; + max-height: 100%; } - // 确保图片按比例缩放显示 + // 确保图片按比例缩放显示并居中 :deep(.el-image__inner) { max-width: 100%; max-height: 100%; - width: auto; - height: auto; object-fit: contain; } }