From eccecfccd9674ac4fc4d2d6ffe5b90d04872d4e7 Mon Sep 17 00:00:00 2001
From: wrt122311 <1720122311@qq.com>
Date: Sat, 25 Apr 2026 14:34:36 +0800
Subject: [PATCH] fix: reserve image space via aspect-ratio to eliminate layout
 shifts

Return width/height from API and set aspect-ratio on <img> so the
browser allocates the correct card height before the image loads.
This prevents masonryAdd from misplacing cards and stops flickering.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 pixiv_client.py        | 2 ++
 web/pixiv_extension.js | 6 ++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/pixiv_client.py b/pixiv_client.py
index 5d3d788..c9e40ec 100644
--- a/pixiv_client.py
+++ b/pixiv_client.py
@@ -110,6 +110,8 @@ class PixivClient:
             illusts.append({
                 "id": i.id,
                 "title": i.title,
+                "width": i.width,
+                "height": i.height,
                 "image_urls": {
                     "medium": i.image_urls.medium,
                     "large": i.image_urls.large,
diff --git a/web/pixiv_extension.js b/web/pixiv_extension.js
index 7067e25..6330e07 100644
--- a/web/pixiv_extension.js
+++ b/web/pixiv_extension.js
@@ -507,8 +507,9 @@ function createCard(ctx, illust) {
   card.dataset.id = id;
 
   const thumb = `/pixiv/image_proxy?url=${encodeURIComponent(illust.image_urls.medium)}`;
+  const ratio = (illust.width && illust.height) ? `aspect-ratio:${illust.width}/${illust.height};` : "";
   card.innerHTML = `
-    <img src="${thumb}" alt="${esc(illust.title)}" loading="lazy" />
+    <img src="${thumb}" alt="${esc(illust.title)}" loading="lazy" style="${ratio}width:100%;height:auto;display:block" />
     <div class="px-card-title">${esc(illust.title)}</div>
   `;
 
@@ -625,8 +626,9 @@ function renderSelectedPane(ctx) {
 
     if (illust) {
       const thumb = `/pixiv/image_proxy?url=${encodeURIComponent(illust.image_urls.medium)}`;
+      const ratio = (illust.width && illust.height) ? `aspect-ratio:${illust.width}/${illust.height};` : "";
       card.innerHTML = `
-        <img src="${thumb}" alt="${esc(illust.title)}" loading="lazy" />
+        <img src="${thumb}" alt="${esc(illust.title)}" loading="lazy" style="${ratio}width:100%;height:auto;display:block" />
         <div class="px-card-title">${esc(illust.title)}</div>
         <div class="px-seq-badge">${S.selectedIds.indexOf(id) + 1}</div>
         <button class="px-remove-btn" title="取消选择">✕</button>