From 02ac19f06341db00692d65f4f037a2e04b58cb42 Mon Sep 17 00:00:00 2001
From: jimi <1847930177@qq.com>
Date: Mon, 9 Mar 2026 14:34:04 +0800
Subject: [PATCH] fix: show full artwork previews

---
 frontend/src/components/Works.css | 12 +++++++++---
 frontend/src/pages/WorkDetail.css | 22 +++++++++++++++-------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Works.css b/frontend/src/components/Works.css
index 919f196..a8e246a 100644
--- a/frontend/src/components/Works.css
+++ b/frontend/src/components/Works.css
@@ -104,7 +104,13 @@
   position: relative;
   height: 290px;
   overflow: hidden;
-  background: linear-gradient(135deg, #f7ede2 0%, #efe2d4 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background:
+    radial-gradient(circle at top, rgba(255, 255, 255, 0.72), transparent 42%),
+    linear-gradient(135deg, #eef7fb 0%, #d9ebf2 100%);
 }
 
 .work-image::after {
@@ -119,12 +125,12 @@
 .work-image img {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
   transition: transform 0.5s ease;
 }
 
 .work-card:hover .work-image img {
-  transform: scale(1.06);
+  transform: scale(1.03);
 }
 
 .work-image-overlay {
diff --git a/frontend/src/pages/WorkDetail.css b/frontend/src/pages/WorkDetail.css
index eea82b5..dc7ffd0 100644
--- a/frontend/src/pages/WorkDetail.css
+++ b/frontend/src/pages/WorkDetail.css
@@ -164,7 +164,14 @@
   position: relative;
   border-radius: 24px;
   overflow: hidden;
-  background: linear-gradient(135deg, #f8efe6 0%, #f1e2d4 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 520px;
+  padding: 24px;
+  background:
+    radial-gradient(circle at top, rgba(255, 255, 255, 0.7), transparent 40%),
+    linear-gradient(135deg, #eef7fb 0%, #d9ebf2 100%);
 }
 
 .work-image-shell::after {
@@ -178,8 +185,9 @@
 
 .work-image {
   width: 100%;
+  max-height: min(72vh, 880px);
   display: block;
-  object-fit: cover;
+  object-fit: contain;
 }
 
 .preview-benefits {
@@ -280,15 +288,15 @@
   width: 100%;
   padding-top: 150%;
   overflow: hidden;
-  background: #f2e8de;
+  background: linear-gradient(135deg, #edf6fb 0%, #dcecf4 100%);
 }
 
 .related-work-image img {
   position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+  inset: 12px;
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  object-fit: contain;
 }
 
 .related-work-overlay {