From 3eb0a11cd911a61a239b1b8bdce79c2db4383b4a Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Thu, 25 Mar 2021 00:19:19 +0100
Subject: [PATCH] fix: :lipstick: resize images instead of container

---
 src/components/Gallery.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
index c83e675..d466c83 100644
--- a/src/components/Gallery.vue
+++ b/src/components/Gallery.vue
@@ -107,16 +107,12 @@ export default {
   &__images {
     position: relative;
     overflow: hidden;
-    height: 50vh;
-
-    @include mq-desktop {
-      height: 80vh;
-    }
   }
 
   &__viewport {
     display: flex;
     flex-flow: row nowrap;
+    align-items: center;
 
     width: 100%;
     height: 100%;
@@ -147,9 +143,14 @@ export default {
     }
 
     img {
-      max-width: 100%;
-      max-height: 100%;
       object-fit: contain;
+
+      width: 100%;
+      max-height: 50vh;
+
+      @include mq-desktop {
+        max-height: 80vh;
+      }
     }
 
     figcaption {