diff --git a/public/js/reader.js b/public/js/reader.js
index fa66b77..63cef7f 100644
--- a/public/js/reader.js
+++ b/public/js/reader.js
@@ -14,6 +14,7 @@ const readerComponent = () => {
 		margin: 30,
 		preloadLookahead: 3,
 		enableRightToLeft: false,
+		fitType: 'vert',
 
 		/**
 		 * Initialize the component by fetching the page dimensions
@@ -65,6 +66,11 @@ const readerComponent = () => {
 						this.preloadImage(this.items[idx - 1].url);
 					}
 
+					const savedFitType = localStorage.getItem('fitType');
+					if (savedFitType) {
+						this.fitType = savedFitType;
+						$('#fit-select').val(savedFitType);
+					}
 					const savedFlipAnimation = localStorage.getItem('enableFlipAnimation');
 					this.enableFlipAnimation = savedFlipAnimation === null || savedFlipAnimation === 'true';
 
@@ -335,6 +341,11 @@ const readerComponent = () => {
 			this.toPage(this.selectedIndex);
 		},
 
+		fitChanged(){
+			this.fitType = $('#fit-select').val();
+			localStorage.setItem('fitType', this.fitType);
+		},
+
 		preloadLookaheadChanged() {
 			localStorage.setItem('preloadLookahead', this.preloadLookahead);
 		},
diff --git a/src/views/reader.html.ecr b/src/views/reader.html.ecr
index 19e2b19..21357ee 100644
--- a/src/views/reader.html.ecr
+++ b/src/views/reader.html.ecr
@@ -5,7 +5,7 @@
   <%= render_component "head" %>
 
   <body style="position:relative;" x-data="readerComponent()" x-init="init($nextTick)" @resize.window="resized()">
-    <div class="uk-section uk-section-default uk-section-small reader-bg" :style="mode === 'continuous' ? '' : 'padding:0'">
+    <div class="uk-section uk-section-default uk-section-small reader-bg" :style="mode === 'continuous' ? '' : 'padding:0; position: relative;'">
 
       <div @keydown.window.debounce="keyHandler($event)"></div>
 
@@ -19,7 +19,7 @@
       </div>
 
       <div
-        :class="{'uk-container': true, 'uk-container-small': mode === 'continuous', 'uk-container-expand': mode !== 'continuous'}">
+        :class="{'uk-container': true, 'uk-container-small': mode === 'continuous', 'uk-container-expand': mode !== 'continuous'}" style="width: fit-content;">
         <div x-show="!loading && mode === 'continuous'" x-cloak>
           <template x-if="!loading && mode === 'continuous'" x-for="item in items">
             <img
@@ -40,18 +40,18 @@
           <%- end -%>
         </div>
 
-        <div x-cloak x-show="!loading && mode !== 'continuous'" class="uk-flex uk-flex-middle" style="height:100vh">
+        <div x-cloak x-show="!loading && mode !== 'continuous'" class="uk-flex uk-flex-middle" :style="`height:${fitType === 'vert' ? '100vh' : ''}; min-width: fit-content;`">
 
           <img uk-img :class="{
                                'uk-align-center': true, 
                                'uk-animation-slide-left': flipAnimation === 'left', 
                                'uk-animation-slide-right': flipAnimation === 'right'
                                }" :data-src="curItem.url" :width="curItem.width" :height="curItem.height" :id="curItem.id" @click="clickImage($event)" :style="`
-                                                                                                                                                                 width:${mode === 'width' ? '100vw' : 'auto'}; 
-                                                                                                                                                                 height:${mode === 'height' ? '100vh' : 'auto'}; 
+                                                                                                                                                                 width:${fitType === 'horz' ? '100vw' : 'auto'}; 
+                                                                                                                                                                 height:${fitType === 'vert' ? '100vh' : 'auto'}; 
                                                                                                                                                                  margin-bottom:0;
-                                                                                                                                                                 max-width:100%;
-                                                                                                                                                                 max-height:100%;
+                                                                                                                                                                 max-width:${fitType === 'horz' ? '100%' : fitType === 'vert' ? '' : 'none' };
+                                                                                                                                                                 max-height:${fitType === 'vert' ? '100%' : fitType === 'horz' ? '' : 'none'};
                                                                                                                                                                  object-fit: contain;
                                                                                                                                                                  `" />
 
@@ -94,6 +94,17 @@
             </div>
           </div>
 
+          <div class="uk-margin" x-show="mode !== 'continuous'">
+            <label class="uk-form-label" for="mode-select">Page fit</label>
+            <div class="uk-form-controls">
+              <select id="fit-select" class="uk-select" @change="fitChanged()">
+                <option value="vert">Fit height</option>
+                <option value="horz">Fit width</option>
+                <option value="real">Real size</option>
+              </select>
+            </div>
+          </div>
+
           <div class="uk-margin" x-show="mode === 'continuous'">
             <label class="uk-form-label" for="margin-range" x-text="`Page Margin: ${margin}px`"></label>
             <div class="uk-form-controls">
