From cf44e85180eec6bd850570f4834c1fc0cb98a9a4 Mon Sep 17 00:00:00 2001 From: Huang Xin Date: Thu, 28 May 2026 00:34:55 +0800 Subject: [PATCH] fix(reader): fit duokan-page-fullscreen cover image without cropping (#4328) Closes #3914. Switch the page-fullscreen image to object-fit: contain (and SVG preserveAspectRatio meet) so cover images fit the page and center without cropping. Also adds a duokan-image-gallery-cell layout helper and drops the mobile marginBottomPx override. Co-authored-by: Claude Opus 4.7 (1M context) --- apps/readest-app/src/__tests__/services/constants.test.ts | 1 - apps/readest-app/src/services/constants.ts | 1 - apps/readest-app/src/utils/style.ts | 8 ++++++++ packages/foliate-js | 2 +- 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/apps/readest-app/src/__tests__/services/constants.test.ts b/apps/readest-app/src/__tests__/services/constants.test.ts index 13d2dbee..dc1baddf 100644 --- a/apps/readest-app/src/__tests__/services/constants.test.ts +++ b/apps/readest-app/src/__tests__/services/constants.test.ts @@ -553,7 +553,6 @@ describe('services/constants', () => { expect(DEFAULT_MOBILE_VIEW_SETTINGS.fullJustification).toBe(false); expect(DEFAULT_MOBILE_VIEW_SETTINGS.animated).toBe(true); expect(typeof DEFAULT_MOBILE_VIEW_SETTINGS.defaultFont).toBe('string'); - expect(typeof DEFAULT_MOBILE_VIEW_SETTINGS.marginBottomPx).toBe('number'); expect(DEFAULT_MOBILE_VIEW_SETTINGS.disableDoubleClick).toBe(true); expect(typeof DEFAULT_MOBILE_VIEW_SETTINGS.spreadMode).toBe('string'); }); diff --git a/apps/readest-app/src/services/constants.ts b/apps/readest-app/src/services/constants.ts index 2746a5cd..a03392ff 100644 --- a/apps/readest-app/src/services/constants.ts +++ b/apps/readest-app/src/services/constants.ts @@ -290,7 +290,6 @@ export const DEFAULT_MOBILE_VIEW_SETTINGS: Partial = { fullJustification: false, animated: true, defaultFont: 'Sans-serif', - marginBottomPx: 16, disableDoubleClick: true, spreadMode: 'none', }; diff --git a/apps/readest-app/src/utils/style.ts b/apps/readest-app/src/utils/style.ts index b9acb655..72026008 100644 --- a/apps/readest-app/src/utils/style.ts +++ b/apps/readest-app/src/utils/style.ts @@ -323,6 +323,14 @@ const getPageLayoutStyles = ( display: none; } + .duokan-image-gallery-cell { + height: calc(var(--available-height) * 1px); + } + + .duokan-image-gallery-cell img { + height: 90%; + } + div:has(> img, > svg) { max-width: 100% !important; } diff --git a/packages/foliate-js b/packages/foliate-js index 554b4bf2..4460d75a 160000 --- a/packages/foliate-js +++ b/packages/foliate-js @@ -1 +1 @@ -Subproject commit 554b4bf2b908d518877a270d0d3e964603006a6b +Subproject commit 4460d75aea9b18af5f0b8a33b91661980a4726ad