From 81207b52151439a7a09c3fed34102f02c488c2b8 Mon Sep 17 00:00:00 2001
From: Spedon <RealSped0n@outlook.com>
Date: Sat, 11 Mar 2023 14:36:02 +0800
Subject: [PATCH] modify image display and use data-status to represent status

---
 assets/css/_partial/_image.scss | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/assets/css/_partial/_image.scss b/assets/css/_partial/_image.scss
index daa8a04..86befda 100644
--- a/assets/css/_partial/_image.scss
+++ b/assets/css/_partial/_image.scss
@@ -1,4 +1,4 @@
-.image {
+.image_container {
   max-height: 55vmin;
   position: absolute;
   transform: translate(-50%, -50%);
@@ -9,12 +9,12 @@
   }
 }
 
-.inactive {
+.image_container[data-status="inactive"] {
   opacity: 0;
   transition: opacity 300ms ease-in-out;
 }
 
-.active {
+.image_container[data-status="active"] {
   opacity: 1;
   transition: opacity 0ms ease-in-out;
 }
@@ -22,15 +22,17 @@
 .top {
   transition: all 0.5s ease-in-out 1.5s;
   max-height: calc(100vh - var(--footer-height));
+  width: auto;
+  max-width: 100vw;
   display: flex;
   align-items: center;
-  width: auto;
   
   img {
     transition: all 0.5s ease-in-out 2s;
     max-height: calc(100vh - var(--footer-height));
     width: auto;
     max-width: 100vw;
+    object-fit: contain;
   }
 }