bug: no maxWidth on wide image in clamped mode

mienaiyami · Oct 28, 2022 · c1a62c6 · c1a62c6
1 parent 6106680
commit c1a62c6
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git 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
@@ -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);
+                                }
+                            }
+                        }
                     }
                 }
             }