fix: image aspect-radio

Author: huibizhang

main.js

@@ -25,6 +25,7 @@ function createWindow() {
     // frame: false,
     skipTaskbar: false,
     transparent: false,
+    backgroundColor: "#1C1917",
 
     resizable: true,
     maximizable: true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "photolisting",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "main": "main.js",
   "scripts": {
     "vite-dev": "cross-env NODE_ENV=dev vite",

src/components/Lightbox.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="absolute left-0 top-0 z-20 flex h-full min-h-0 w-screen items-center justify-center overflow-hidden p-5 transition-all"
+    class="absolute left-0 top-0 z-20 flex h-full min-h-0 w-screen items-center justify-center overflow-hidden p-5 transition-opacity"
     :class="formOpen ? '' : 'pointer-events-none opacity-0'"
     tabindex="0"
     v-focus="formOpen"
@@ -58,6 +58,13 @@ export default {
     };
   },
   mounted() {
+    window.addEventListener("resize", () => {
+      if (this.index >= 0 && this.index < this.files.length) {
+        const f = this.files[this.index];
+        this.aspectRatioDetection(f);
+      }
+    });
+
     this.loadImage();
   },
   methods: {
@@ -68,8 +75,7 @@ export default {
         const f = this.files[this.index];
         src = f.url;
 
-        console.log(f.height, f.width);
-        this.widthFirst = f.width >= f.height;
+        this.aspectRatioDetection(f);
 
         var fr = new FileReader();
         fr.onload = () => {
@@ -172,6 +178,20 @@ export default {
 
       // console.log(type, button, movementX, movementY);
     },
+    aspectRatioDetection(f) {
+      this.widthFirst = f.width >= f.height;
+
+      const screen = {
+        width: window.innerWidth,
+        height: window.innerHeight,
+      };
+      const overSize = this.widthFirst
+        ? screen.width / screen.height > f.width / f.height
+        : screen.width / screen.height < f.width / f.height;
+
+      if (this.widthFirst) this.widthFirst = this.widthFirst && !overSize;
+      else this.widthFirst = this.widthFirst || overSize;
+    },
   },
   watch: {
     index() {

src/index.css

@@ -4,5 +4,5 @@
 
 html,
 body {
-  @apply absolute left-0 top-0 h-screen w-screen overflow-hidden;
+  @apply absolute left-0 top-0 h-screen w-screen overflow-hidden bg-stone-900;
 }