From 9051dc73a568262382a12d0111718d0cfd88a7ae Mon Sep 17 00:00:00 2001 From: laoyang Date: Thu, 24 Sep 2026 17:31:53 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=81=E9=9D=A2=E4=B8=80=E5=BE=8B=E6=8C=89?= =?UTF-8?q?=2016:9=20=E5=B1=95=E7=A4=BA=EF=BC=88=E6=89=B9=2017=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 封面是**按 16:9 裁**的（activities/form.php 里 Cropper 的 `aspectRatio: 16 / 9`）， 可展示端的容器不是这个比例 —— 裁好的构图又被切了一刀： - 详情页封面 `.activity-cover`：原来是 `max-height: 320px` + `object-fit: cover`， 容器比例由**图片原始比例**决定，16:9 的封面铺满后又被高度压掉一截。 改成 `aspect-ratio: 16 / 9` + img `height: 100%`。 - 首页列表行封面 `.act-row-cover`：批 16 写成 4/3（照抄了照片格的习惯）， 横向封面被切成方的 → 改成 16/9。 - 编辑页的封面预览 `.cover-preview` 本来就是 16/9，没动。 ⚠️ 容器比例一旦与裁剪比例不一致，`object-fit: cover` 就会重新裁一次 —— 所以这类容器**不要再加 max-height**（旧的 320px 已下线，部署脚本有 `期望 0` 的哨兵）。 验证：两条几何断言分别钉住两处展示 —— 详情页（_map12.js，15 项）量 `.activity-cover` 的宽高比、 首页列表（_map16.js，21 项）量**每一行的封面**（含无封面的占位块）。 为此给 _page11.php 的活动夹具补了封面（原来 cover_image 是 null，量不到）。 本地全链 13 步全绿；远端 e2e 365 项 0 失败；部署静态断言、双 PHP 渲染、 内容断言全过。 --- assets/style.css | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/assets/style.css b/assets/style.css index 68db85b..4a390a3 100644 --- a/assets/style.css +++ b/assets/style.css @@ -352,9 +352,19 @@ hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; } .card-body h3 a { color: var(--text); } .card-body h3 a:hover { color: var(--accent); text-decoration: none; } -.activity-cover { position: relative; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px; } -.activity-cover img { width: 100%; max-height: 320px; object-fit: cover; display: block; } -.activity-cover .cover-placeholder { min-height: 150px; } +/* 封面是按 16:9 裁的（activities/form.php 里的 Cropper aspectRatio 就是 16/9）， + 展示端必须同比例 —— 不然辛苦裁好的构图在这里又被切掉一块。 + ⚠️ 别再加 max-height：容器比例一旦被改，object-fit: cover 就重新裁一次图。 */ +.activity-cover { + position: relative; border-radius: var(--radius-lg); overflow: hidden; + margin-bottom: 20px; background: var(--bg-soft); + aspect-ratio: 16 / 9; +} +.activity-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } +.activity-cover .cover-placeholder { + width: 100%; height: 100%; + display: flex; align-items: center; justify-content: center; +} /* ── 8. 时间轴与节点卡片 ─────────────────────────────────────────────────── */ .timeline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } @@ -1354,8 +1364,9 @@ video.video-thumb.video-thumb-mini { transition: box-shadow .15s, border-color .15s; } .act-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } +/* 同上：列表行的封面也按 16:9（原来是 4/3，会把横向构图上下切掉） */ .act-row-cover { - position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm, 8px); + position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm, 8px); overflow: hidden; background: var(--bg-soft); } .act-row-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }