fix: Fixed image scaling issues in Safari and mobile Chrome (#103)

* 🔧 Chore: Format current date and timezone in shell script

* fix:Fixed image scaling issues in Safari and mobile Chrome

* Create tall-crews-play.md

* fix:Fixed image scaling issues in Safari and mobile Chrome

fix:Fixed image scaling issues in Safari and mobile Chrome

* docs: add changeset

* 🔥 Chore: clean unneeded files

---------

Co-authored-by: kwchang0831 <88667293+kwchang0831@users.noreply.github.com>

.changeset/shy-schools-burn.md

@@ -0,0 +1,5 @@
+---
+'@kwchang0831/svelte-qwer': patch
+---
+
+fix: Fixed image scaling issues in Safari and mobile Chrome

src/lib/components/image_zoom.svelte

@@ -7,10 +7,12 @@
   import { assets } from '$generated/assets';
   import { UserConfig } from '$config/QWER.config';
   import { fade } from 'svelte/transition';
-  import { onMount } from 'svelte';
+  import { onMount, afterUpdate } from 'svelte';
   import mediumZoom from 'medium-zoom';
 
   let imgElement: HTMLElement;
+  // Reference to the container element for responsive adjustments
+  let containerElement: HTMLElement;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -48,17 +50,44 @@
   $: width = asset?.width;
   $: height = asset?.height;
 
+  // Function for responsive image size adjustment
+  const updateImageSize = () => {
+    if (imgElement && containerElement) {
+      const containerWidth = containerElement.offsetWidth;
+      imgElement.style.width = `${containerWidth}px`;
+      imgElement.style.height = 'auto';
+    }
+  };
+
   onMount(() => {
     mediumZoom(imgElement, {
       scrollOffset: 0,
       background: 'rgba(25, 18, 25, .9)',
     });
+
+    // Add window resize listener for responsive adjustments
+    window.addEventListener('resize', updateImageSize);
+    updateImageSize();
+
+    // Clean up event listener on component unmount
+    return () => {
+      window.removeEventListener('resize', updateImageSize);
+    };
+  });
+
+  // Adjust image size after each update to maintain responsiveness
+  afterUpdate(() => {
+    updateImageSize();
   });
 </script>
 
-<figure in:fade|global={{ duration: 300, delay: 300 }} out:fade|global={{ duration: 300 }} class="my6 select-none">
+<figure
+  bind:this={containerElement}
+  in:fade|global={{ duration: 300, delay: 300 }}
+  out:fade|global={{ duration: 300 }}
+  class="my6 select-none w-full">
   {#if asset}
-    <picture>
+    <picture class="block w-full">
       {#if resolutions}
         {#each resolutions as [res, meta]}
           {#each meta.format as format, index}
@@ -93,7 +122,8 @@
         bind:this={imgElement}
         draggable="false"
         itemprop="image"
-        class="z-50 m-auto md:(rounded-2xl shadow-xl) {className ?? 'h-full w-auto aspect-auto object-cover'}"
+        class="z-50 m-auto md:rounded-2xl md:shadow-xl {className ?? 'w-full h-auto max-w-full object-contain'}"
+        style="aspect-ratio: {width} / {height};"
         {decoding}
         {loading}
         src={asset.original}
@@ -106,7 +136,8 @@
       bind:this={imgElement}
       draggable="false"
       itemprop="image"
-      class="z-50 m-auto md:(rounded-2xl shadow-xl) {className ?? 'h-full w-auto aspect-auto object-cover'}"
+      class="z-50 m-auto md:rounded-2xl md:shadow-xl {className ?? 'w-full h-auto max-w-full object-contain'}"
+      style="aspect-ratio: {width} / {height};"
       {decoding}
       {loading}
       {src}