dev

assets/css/_partial/_image.scss

@@ -1,16 +1,28 @@
 .image_container {
-  max-height: 55vmin;
-  position: absolute;
-  max-width: 100vw;
+  position: fixed;
+  top: 0;
+  left: 0;
   opacity: 1;
   display: flex;
   align-items: center;
-  top: 0;
-  left: 0;
+  will-change: transform;
+  
+  img {
+    max-height: 55vmin;
+    max-width: 100vw;
+    height: auto;
+    width: auto;
+    object-fit: contain;
+  }
   
   &[data-status='t0'] {
     transition: all 0.5s ease-in-out 1.5s;
     max-height: calc(100vh - var(--footer-height));
+  
+    img {
+      transition: all 0.5s ease-in-out 2s;
+      max-height: calc(100vh - var(--footer-height));
+    }
   }
   
   &[data-status='t1'] {
@@ -34,8 +46,13 @@
   }
   
   &[data-status='r0'] {
-    max-height: 55vmin;
     transition: all 0.5s ease-in-out 1s;
+    opacity: 1;
+  
+    img {
+      transition: all 1s ease-in-out 0s;
+      max-height: 55vmin;
+    }
   }
   
   &[data-status='r1'] {
@@ -58,23 +75,36 @@
     opacity: 1;
   }
   
-  #layer5 {
+  &#layer5 {
     z-index: 5;
   }
   
-  #layer4 {
+  &#layer4 {
     z-index: 4;
   }
   
-  #layer3 {
+  &#layer3 {
     z-index: 3;
   }
   
-  #layer2 {
+  &#layer2 {
     z-index: 2;
   }
   
-  #layer1 {
+  &#layer1 {
     z-index: 1;
   }
 }
+
+.images {
+  
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    object-fit: contain;
+    max-height: 55vmin;
+    max-width: 100vw;
+    transform-origin: center;
+  }
+}