diff --git a/public/js/reader.js b/public/js/reader.js
index fa66b77..6cacf78 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,10 @@ const readerComponent = () => {
 						this.preloadImage(this.items[idx - 1].url);
 					}
 
+					const savedFitType = localStorage.getItem('fitType');
+					if(savedFitType){
+						this.fitType = savedFitType;
+					}
 					const savedFlipAnimation = localStorage.getItem('enableFlipAnimation');
 					this.enableFlipAnimation = savedFlipAnimation === null || savedFlipAnimation === 'true';
 
@@ -301,6 +306,21 @@ const readerComponent = () => {
 				});
 			});
 		},
+		/**
+		 * Changes how the view should fit to the screen or if it should use the image's real size
+		 *
+		 * @param {string} fitType - ver, horz and real for fitting to height, width,
+		 * and showing real size, respectively
+		 */
+		setFit(fitType){
+			if (fitType === 'vert'){
+				document.styleSheets[0].rules[21].style.maxWidth = '100%'; 
+			} else if(fitType === 'horz'){
+				document.styleSheets[0].rules[21].style.maxWidth = '100%';
+			} else if (fitType === 'real'){
+				document.styleSheets[0].rules[21].style.maxWidth = '';
+			}
+		},
 		/**
 		 * Marks progress as 100% and jumps to the next entry
 		 *
@@ -335,6 +355,12 @@ const readerComponent = () => {
 			this.toPage(this.selectedIndex);
 		},
 
+		fitChanged(){
+			this.fitType = $('#fit-select').val();
+			this.setFit(this.fitType);
+			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..6e4fc8a 100644
--- a/src/views/reader.html.ecr
+++ b/src/views/reader.html.ecr
@@ -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' : ''">
 
           <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:${mode === 'vert' ? '100vh' : 'auto'}; 
                                                                                                                                                                  margin-bottom:0;
-                                                                                                                                                                 max-width:100%;
-                                                                                                                                                                 max-height:100%;
+                                                                                                                                                                 max-width:${fitType === 'horz' ? '100%' : ''};
+                                                                                                                                                                 max-height:${fitType === 'vert' ? '100%' : ''};
                                                                                                                                                                  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">