diff --git a/src/components/manga/reader/Page.tsx b/src/components/manga/reader/Page.tsx index df598f6494..40af457f01 100644 --- a/src/components/manga/reader/Page.tsx +++ b/src/components/manga/reader/Page.tsx @@ -11,6 +11,22 @@ import SpinnerImage from 'components/SpinnerImage'; import useLocalStorage from 'util/useLocalStorage'; function imageStyle(settings: IReaderSettings): any { + const [dimensions, setDimensions] = React.useState({ + height: window.innerHeight, + width: window.innerWidth, + }); + React.useEffect(() => { + function handleResize() { + setDimensions({ + height: window.innerHeight, + width: window.innerWidth, + }); + } + window.addEventListener('resize', handleResize); + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); if (settings.readerType === 'DoubleLTR' || settings.readerType === 'DoubleRTL' || settings.readerType === 'ContinuesHorizontalLTR' @@ -32,7 +48,7 @@ function imageStyle(settings: IReaderSettings): any { display: 'block', marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0, minWidth: '50vw', - width: '100%', + width: dimensions.width < dimensions.height ? '100vw' : '100%', maxWidth: '100%', }; } @@ -105,7 +121,7 @@ const Page = React.forwardRef((props: IProps, ref: any) => { }, [handleVerticalScroll]); return ( -