mirrors2/ONE
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

短文配图网格改 2:1 定高：宽列下 1:1 格子顶掉一整屏，行 minmax(0,1fr) 防图片自然高撑爆

Browse Source
This commit is contained in:
Sakurasan committed 2026-09-30 22:37:39 +08:00
1 parent cc01650d0d
commit a4e182aeb4
1 file changed
+16 -8
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/ui/yohaku/home.css
+16 -8
View File
@@ -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;}