diff --git a/src/Components/Reader.tsx b/src/Components/Reader.tsx index b11a501..a33c6b5 100644 --- a/src/Components/Reader.tsx +++ b/src/Components/Reader.tsx @@ -540,7 +540,8 @@ const Reader = () => { className={ "row " + (wideImageContMap.includes(i) ? "wide " : "") + - (appSettings.readerSettings.pagesPerRowSelected !== 0 ? "twoPagePerRow " : "") + (appSettings.readerSettings.pagesPerRowSelected !== 0 ? "twoPagePerRow " : "") + + (appSettings.readerSettings.widthClamped ? "widthClamped " : "") } data-imagerow={i + 1} style={{ diff --git a/src/styles/index.scss b/src/styles/index.scss index b238c84..f5c72f1 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -999,21 +999,38 @@ body { } img { width: var(--varWidth); - // max-width: 100%; + max-width: 500%; // min-width: 1%; // image-rendering: pixelated; } + &.widthClamped { + img { + max-width: 100%; + } + } &.twoPagePerRow { img { - max-width: 50%; + max-width: 250%; width: calc(var(--varWidth) / 2); } &.wide { img { - max-width: 100%; + max-width: 500%; width: var(--varWidth); } } + &.widthClamped { + img { + max-width: 50%; + width: calc(var(--varWidth) / 2); + } + &.wide { + img { + max-width: 100%; + width: var(--varWidth); + } + } + } } } }