fix(card): 修复首页卡片封面图高度場陷
PostCard 的封面容器同时带 .blur-img 和 .post-card-cover-blur 两个类。 .blur-img 的 aspect-ratio: var(--ar) 定义在 .post-card-cover-blur 之后 (同特异性,后定义胜出),而卡片不写 --ar 变量(只有详情页 PostCover 在 SSR 写入),导致 var(--ar) 解析为空 → aspect-ratio 无效 → 高度 0。 用 .blur-img.post-card-cover-blur 双类选择器提升特异性(0,2,0 > 0,1,0), 让固定 4/3 比例可靠覆盖 var(--ar)。
This commit is contained in:
parent
66d29eaa62
commit
d48b32b40e
@ -526,8 +526,10 @@
|
||||
text-underline-offset: 0.3rem;
|
||||
}
|
||||
|
||||
/* 卡片封面:blur-img 结构,固定 4:3 比例,hover 缩放 */
|
||||
.post-card-cover-blur {
|
||||
/* 卡片封面:blur-img 结构,固定 4:3 比例,hover 缩放。
|
||||
用属性选择器提升特异性,可靠覆盖 .blur-img 的 aspect-ratio: var(--ar)
|
||||
(卡片不写 --ar,var(--ar) 解析为空会导致高度塌陷)。 */
|
||||
.blur-img.post-card-cover-blur {
|
||||
margin: 0;
|
||||
aspect-ratio: 4 / 3;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user