From 6e98c2abfa3a5241f8f198e8d93bb09e89ff67c1 Mon Sep 17 00:00:00 2001
From: xfy <i@rua.plus>
Date: Mon, 22 Jun 2026 18:11:04 +0800
Subject: [PATCH] fix(blur-up): use slash separator for aspect-ratio (--ar W /
 H)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根因: CSS aspect-ratio 合法语法是 "width / height"(斜杠分隔),
但 --ar 生成时用了冒号 ":"(--ar:2974:2066)。冒号在 CSS 里是声明分隔符,
2974:2066 被判非法值, aspect-ratio 退化为 auto, 容器高度为 0, 图片不可见.

控制台数据证实: aspectRatio:"auto", clientHeight:0, arVar:"2974:2066"

修复: markdown.rs(正文图) 和 image_viewer.rs(封面) 两处把
{}:{} 改成 {} / {}. CSS 规则 aspect-ratio: var(--ar) 不变,
var 展开后变成合法的 "2974 / 2066".
---
 src/api/markdown.rs            | 3 ++-
 src/components/image_viewer.rs | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/api/markdown.rs b/src/api/markdown.rs
index b6a0fec..9107ab9 100644
--- a/src/api/markdown.rs
+++ b/src/api/markdown.rs
@@ -232,8 +232,9 @@ fn wrap_images_with_blur(html: &str) -> String {
                 .unwrap_or("");
 
             // 查 dimensions，算 aspect-ratio
+            // 注意：CSS aspect-ratio 用斜杠分隔（width / height），不是冒号
             let ar_style = crate::api::image::get_image_dimensions(rel_path)
-                .map(|(w, h)| format!(" style=\"--ar:{}:{};\"", w, h))
+                .map(|(w, h)| format!(" style=\"--ar:{} / {};\"", w, h))
                 .unwrap_or_default();
 
             // alt 转义（src/alt 来自 markdown，pulldown-cmark 已转义过，这里直接用）
diff --git a/src/components/image_viewer.rs b/src/components/image_viewer.rs
index cc01da9..6da7981 100644
--- a/src/components/image_viewer.rs
+++ b/src/components/image_viewer.rs
@@ -77,7 +77,8 @@ pub fn ImageViewer(
                 .map(|p| p.split('?').next().unwrap_or(p))
             {
                 if let Some((w, h)) = crate::api::image::get_image_dimensions(rel) {
-                    s = format!("--ar:{}:{};", w, h);
+                    // 注意：CSS aspect-ratio 用斜杠分隔（width / height），不是冒号
+                    s = format!("--ar:{} / {};", w, h);
                 }
             }
         }