Fix dialog image aspect ratio

shiro · Apr 26, 2024 · 621b9f0 · 621b9f0
1 parent 88f7a5c
commit 621b9f0
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 7 deletions.
diff --git a/src/DialogImage.tsx b/src/DialogImage.tsx
@@ -27,7 +27,7 @@ const DialogImage: Component<Props> = (props) => {
     <div class={cn($class, "relative overflow-hidden")} {...rest}>
       <Dialog.Root>
         <Dialog.Trigger class="block">
-          <props.thumbnail class={cn(_Thumbnail, "object-cover")} alt={alt} />
+          <props.thumbnail class={cn(_Thumbnail, "max-w-[100vw]")} alt={alt} />
         </Dialog.Trigger>
         <Dialog.Portal>
           <Dialog.Overlay
@@ -38,9 +38,7 @@ const DialogImage: Component<Props> = (props) => {
             <Dialog.Content class="flex max-h-[90vh] items-center justify-center s:max-w-[90vw]">
               <Dialog.CloseButton>
                 <props.image
-                  class={cn(
-                    "max-h-[90vh] overflow-hidden object-contain s:max-w-[90vw]"
-                  )}
+                  class={cn(_FullscreenImage, "overflow-hidden object-contain")}
                   alt={alt}
                 />
               </Dialog.CloseButton>
@@ -54,4 +52,8 @@ const DialogImage: Component<Props> = (props) => {
 
 const _Thumbnail = css``;
 
+const _FullscreenImage = css`
+  --h_limit: 90vh;
+`;
+
 export default withStyle(DialogImage, { Thumbnail: _Thumbnail });
diff --git a/src/GallerySite.tsx b/src/GallerySite.tsx
@@ -72,6 +72,7 @@ const card = css`
     left: 0;
     width: 100%;
     height: 100%;
+    object-fit: cover;
   }
 `;
 

diff --git a/src/LazyImage.tsx b/src/LazyImage.tsx
@@ -1,7 +1,7 @@
 import { css } from "@linaria/core";
 import cn from "classnames";
 import { Component, ComponentProps, JSX } from "solid-js";
-import { withStyle } from "~/style/commonStyle";
+import { breakpoint, withStyle } from "~/style/commonStyle";
 
 const isImageCached = (url: string) => {
   const img = new Image();
@@ -58,11 +58,24 @@ const _LazyImage = css`
   background: linear-gradient(45deg, var(--color1) 0%, var(--color2) 100%);
   width: calc(var(--width) * 1px);
   height: calc(var(--height) * 1px);
+  object-fit: contain;
+
+  --w_limit: 100%;
+  --h_limit: 100vw;
+  // we multiply by 100 to avoid CSS precision loss
+  --x_sf_px: calc((1 / var(--width)) * var(--w_limit) * 100);
+  --y_sf_px: calc((1 / var(--height)) * var(--h_limit) * 100);
+  --sf_px: min(var(--x_sf_px), var(--y_sf_px));
+  width: calc((var(--width) * var(--sf_px) / 100));
+  height: calc((var(--height) * var(--sf_px) / 100));
+  ${breakpoint("xs")} {
+    object-fit: cover !important;
+  }
 
   img {
-    object-fit: inherit;
     width: 100%;
     height: 100%;
+    object-fit: inherit;
     // hide text when loading image
     text-indent: 100%;
 

diff --git a/src/about/ProjectsSection.tsx b/src/about/ProjectsSection.tsx
@@ -164,7 +164,7 @@ const Project: Component<any> = (props: any) => {
               alt={`Project screenshot of project "${name}"`}
               class={cn(
                 ImageStyle,
-                "h-32 w-[30%] max-w-60 rounded border-2 border-colors-primary-800 object-cover xs:w-[50%]"
+                "h-32 w-[30%] max-w-60 rounded border-2 border-colors-primary-800 xs:w-[50%]"
               )}
               image={image}
               thumbnail={thumbnails[idx()]}