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; }