From a4e182aeb435928dd75f62230cb3dc4279f332cc Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Wed, 30 Sep 2026 22:37:39 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9F=AD=E6=96=87=E9=85=8D=E5=9B=BE=E7=BD=91?=
 =?UTF-8?q?=E6=A0=BC=E6=94=B9=202:1=20=E5=AE=9A=E9=AB=98=EF=BC=9A=E5=AE=BD?=
 =?UTF-8?q?=E5=88=97=E4=B8=8B=201:1=20=E6=A0=BC=E5=AD=90=E9=A1=B6=E6=8E=89?=
 =?UTF-8?q?=E4=B8=80=E6=95=B4=E5=B1=8F=EF=BC=8C=E8=A1=8C=20minmax(0,1fr)?=
 =?UTF-8?q?=20=E9=98=B2=E5=9B=BE=E7=89=87=E8=87=AA=E7=84=B6=E9=AB=98?=
 =?UTF-8?q?=E6=92=91=E7=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/ui/yohaku/home.css | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/src/ui/yohaku/home.css b/frontend/src/ui/yohaku/home.css
index d097c89..374729c 100644
--- a/frontend/src/ui/yohaku/home.css
+++ b/frontend/src/ui/yohaku/home.css
@@ -133,19 +133,27 @@ html[data-ui='vivid'] .note .body a {color:var(--accent);font-weight:600;
 @media (hover: hover) and (pointer: fine) {
   html[data-ui='vivid'] .note .body a:hover {border-bottom-color:var(--accent)}
 }
-/* 短文配图：Twitter 式网格（快发盒上传，≤4 张） */
+/* 短文配图：Twitter 式网格（快发盒上传，≤4 张）。
+   高度由容器按 宽:高 = 2:1 定，不再让格子各自 aspect-ratio:1 往下撑——
+   信息流列宽有 1044px，1:1 的 n3 网格实测 981px 高，一条带图短文顶掉
+   一整屏。格子统一 object-fit:cover 居中裁，全图点开 lightbox 看。
+   n1 没有网格比例可依，学详情页 .post-imgs.n1 给个 520px 上限。 */
 html[data-ui='vivid'] .note .imgs {display:grid;gap:3px;margin-top:10px;
   border-radius:var(--radius);overflow:hidden;}
 html[data-ui='vivid'] .note .imgs img {display:block;width:100%;height:100%;
   object-fit:cover;cursor:zoom-in;}
+html[data-ui='vivid'] .note .imgs.n1 img {max-height:520px;}
 html[data-ui='vivid'] .note .imgs.n2,
-html[data-ui='vivid'] .note .imgs.n4 {grid-template-columns:1fr 1fr;}
-html[data-ui='vivid'] .note .imgs.n3 {grid-template-columns:1fr 1fr;}
-html[data-ui='vivid'] .note .imgs.n2 img,
-html[data-ui='vivid'] .note .imgs.n4 img {aspect-ratio:1;}
-html[data-ui='vivid'] .note .imgs.n3 img {aspect-ratio:1;}
-html[data-ui='vivid'] .note .imgs.n3 img:first-child {grid-row:span 2;
-  aspect-ratio:auto;height:100%;}
+html[data-ui='vivid'] .note .imgs.n3,
+html[data-ui='vivid'] .note .imgs.n4 {grid-template-columns:1fr 1fr;
+  aspect-ratio:2/1;}
+/* 行高必须 minmax(0,1fr)：裸 1fr 自带 min-content 下限，图片的自然高度会把行
+   撑回 733px+，容器 aspect-ratio 定出的 491px 装不下，n3/n4 的第二行整行被
+   裁出可视区。0 下限让行严格对半分，图片交给 object-fit:cover 裁。 */
+html[data-ui='vivid'] .note .imgs.n2 {grid-template-rows:minmax(0,1fr);}
+html[data-ui='vivid'] .note .imgs.n3,
+html[data-ui='vivid'] .note .imgs.n4 {grid-template-rows:minmax(0,1fr) minmax(0,1fr);}
+html[data-ui='vivid'] .note .imgs.n3 img:first-child {grid-row:span 2;}
 html[data-ui='vivid'] .note .tags {display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
 html[data-ui='vivid'] .pager {display:flex;gap:8px;align-items:center;justify-content:center;
   margin-top:36px;flex-wrap:wrap;}