diff --git a/src/Components/PhotoViewer.tsx b/src/Components/PhotoViewer.tsx
index afaedf6..a277439 100644
--- a/src/Components/PhotoViewer.tsx
+++ b/src/Components/PhotoViewer.tsx
@@ -150,6 +150,28 @@ let PhotoViewer = () => {
     })
   }
 
+  let resizeImage = () => {
+    let dstWidth;
+    let dstHeight;
+
+    let imgHeight = imageViewer.height;
+    let imgWidth = imageViewer.width;
+
+    if(
+      imgWidth / window.innerWidth <
+      imgHeight / window.innerHeight
+    ) {
+      dstWidth = imgWidth * (window.innerHeight / imgHeight);
+      dstHeight = window.innerHeight;
+    } else{
+      dstWidth = window.innerWidth;
+      dstHeight = imgHeight * (window.innerWidth / imgWidth);
+    }
+
+    imageViewer.style.width = dstWidth + 'px';
+    imageViewer.style.height = dstHeight + 'px';
+  }
+
   onMount(() => {
     utils.set(photoControls, { translateX: '-50%' });
     utils.set(photoTrayCloseBtn, { translateX: '-50%', opacity: 0, scale: '0.75', bottom: '10px' });
@@ -157,6 +179,10 @@ let PhotoViewer = () => {
 
     window.addEventListener('keyup', switchPhotoWithKey);
 
+    resizeImage();
+
+    window.addEventListener('resize', () => resizeImage());
+
     let contextMenuOpen = false;
     window.CloseAllPopups.push(() => {
       contextMenuOpen = false;
@@ -465,7 +491,16 @@ let PhotoViewer = () => {
           <img draggable="false" src="/icon/x-solid.svg"></img>
         </div>
       </div>
-      <img class="image-container" ref={( el ) => imageViewer = el} />
+
+      <div style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        "justify-content": 'center',
+        'align-items': 'center'
+      }}>
+        <img class="image-container" ref={( el ) => imageViewer = el} />
+      </div>
 
       <div class="prev-button" onClick={() => {
         window.CloseAllPopups.forEach(p => p());
diff --git a/src/css/viewer.css b/src/css/viewer.css
index 38df7be..bc7b816 100644
--- a/src/css/viewer.css
+++ b/src/css/viewer.css
@@ -59,7 +59,8 @@
 }
 
 .image-container{
-  height: 100%;
+  max-width: none;
+  max-height: none;
   background-size: contain !important;
   background-repeat: no-repeat !important;
   background-position: center !important;