xfy/yggdrasil
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style(card): 卡片封面图比例从 4:3 改为 16:9

Browse Source 
- input.css: .blur-img.post-card-cover-blur 的 aspect-ratio 4/3 → 16/9
- post_card.rs: 缩略图请求 thumb=400x300 → 400x225 匹配 16:9
This commit is contained in:
xfy 2026-06-24 15:49:53 +08:00
parent a9b194f3bf
commit 5fc8a9aeeb
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
input.css
View File

@ -526,12 +526,12 @@
text-underline-offset: 0.3rem; text-underline-offset: 0.3rem;
} }
/* 卡片封面：blur-img 结构，固定 4:3 比例，hover 缩放。 /* 卡片封面：blur-img 结构，固定 16:9 比例，hover 缩放。
用属性选择器提升特异性，可靠覆盖 .blur-img 的 aspect-ratio: var(--ar) 双类选择器提升特异性，可靠覆盖 .blur-img 的 aspect-ratio: var(--ar)
（卡片不写 --ar，var(--ar) 解析为空会导致高度塌陷）。 */ （卡片不写 --ar，var(--ar) 解析为空会导致高度塌陷）。 */
.blur-img.post-card-cover-blur { .blur-img.post-card-cover-blur {
margin: 0; margin: 0;
aspect-ratio: 4 / 3; aspect-ratio: 16 / 9;
} }
.post-card-cover-blur img { .post-card-cover-blur img {
width: 100%; width: 100%;

2
src/components/post_card.rs
View File

@ -47,7 +47,7 @@ pub fn PostCard(post: PostListItem) -> Element {
} }
img { img {
class: "blur-img-full is-loaded", class: "blur-img-full is-loaded",
src: "{cover_src}?thumb=400x300", src: "{cover_src}?thumb=400x225",
alt: "{post.title}", alt: "{post.title}",
} }
} }