diff --git a/input.css b/input.css index 14661a9..79ebd75 100644 --- a/input.css +++ b/input.css @@ -526,12 +526,13 @@ text-underline-offset: 0.3rem; } - /* 卡片封面:blur-img 结构,固定 16:9 比例,hover 缩放。 + /* 卡片封面:blur-img 结构,固定 21:9 比例,hover 缩放。 双类选择器提升特异性,可靠覆盖 .blur-img 的 aspect-ratio: var(--ar) - (卡片不写 --ar,var(--ar) 解析为空会导致高度塌陷)。 */ + (卡片不写 --ar,var(--ar) 解析为空会导致高度塌陷)。 + 21:9 与后台编辑器封面区统一比例,宽屏横幅式。 */ .blur-img.post-card-cover-blur { margin: 0; - aspect-ratio: 16 / 9; + aspect-ratio: 21 / 9; } .post-card-cover-blur img { width: 100%; diff --git a/src/components/post_card.rs b/src/components/post_card.rs index 0bce2c3..3f83ba3 100644 --- a/src/components/post_card.rs +++ b/src/components/post_card.rs @@ -47,7 +47,7 @@ pub fn PostCard(post: PostListItem) -> Element { } img { class: "blur-img-full is-loaded", - src: "{cover_src}?thumb=400x225", + src: "{cover_src}?thumb=420x180", alt: "{post.title}", } } diff --git a/src/pages/admin/write.rs b/src/pages/admin/write.rs index 51cb073..2be2683 100644 --- a/src/pages/admin/write.rs +++ b/src/pages/admin/write.rs @@ -480,15 +480,16 @@ fn write_editor(post_id: Option) -> Element { } } - // 封面图上传区:空态矮横条(不挤压编辑器),有图时展开 16:9 预览。 + // 封面图上传区:空态矮横条(不挤压编辑器),有图时展开成 21:9 超宽预览。 + // 21:9 与首页卡片封面统一比例,比 16:9 更扁,适合宽屏横幅式封面。 // 容器统一绑定拖拽与粘贴事件;内部按 cover_image / cover_uploading 切换空态、上传中、预览。 div { class: "relative w-full rounded-xl border border-dashed overflow-hidden transition-all duration-200 group/cover", - // 空态矮横条;有图/上传中展开成 16:9。 + // 空态矮横条;有图/上传中展开成 21:9。 class: if cover_image().is_empty() && !cover_uploading() { "h-14" } else { - "aspect-video" + "aspect-[21/9]" }, class: if cover_drag_active() { "border-[var(--color-paper-accent)] bg-[var(--color-paper-accent-soft)]"