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 {