fix: 主图1产品图片放大,四周更均匀

This commit is contained in:
12600k-rog-d4
2026-04-04 22:45:27 +08:00
parent c45b8eacd0
commit 4506f90d3d
3 changed files with 18 additions and 11 deletions

View File

@@ -60,10 +60,10 @@
margin-top: 6px; margin-top: 6px;
letter-spacing: 3px; letter-spacing: 3px;
} }
/* 产品展示台 - 更大 */ /* 产品展示台 */
.product-stage { .product-stage {
width: 600px; width: 600px;
height: 480px; height: 500px;
background: rgba(255,255,255,0.08); background: rgba(255,255,255,0.08);
border-radius: 25px; border-radius: 25px;
display: flex; display: flex;
@@ -76,17 +76,23 @@
box-shadow: box-shadow:
0 20px 60px rgba(0,0,0,0.3), 0 20px 60px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.1); inset 0 1px 0 rgba(255,255,255,0.1);
overflow: hidden;
} }
/* 产品图片 - 放大 */ /* 产品图片 - 放大并裁剪 */
.product-img-wrapper { .product-img-wrapper {
position: relative; position: relative;
padding: 15px; width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
} }
.product-img { .product-img {
max-width: 520px; width: 580px;
max-height: 420px; height: 480px;
object-fit: contain; object-fit: cover;
border-radius: 12px; object-position: center;
border-radius: 10px;
box-shadow: box-shadow:
0 15px 40px rgba(0,0,0,0.4), 0 15px 40px rgba(0,0,0,0.4),
0 0 0 1px rgba(255,255,255,0.1); 0 0 0 1px rgba(255,255,255,0.1);
@@ -97,9 +103,10 @@
top: 100%; top: 100%;
left: 50%; left: 50%;
transform: translateX(-50%) scaleY(-1); transform: translateX(-50%) scaleY(-1);
max-width: 520px; width: 580px;
max-height: 420px; height: 100px;
object-fit: contain; object-fit: cover;
object-position: center bottom;
opacity: 0.12; opacity: 0.12;
filter: blur(3px); filter: blur(3px);
mask-image: linear-gradient(to top, rgba(0,0,0,0.3), transparent); mask-image: linear-gradient(to top, rgba(0,0,0,0.3), transparent);

Binary file not shown.

Before

Width:  |  Height:  |  Size: 447 KiB

After

Width:  |  Height:  |  Size: 521 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 261 KiB

After

Width:  |  Height:  |  Size: 261 KiB