Fix the overflow issue

zbycz · Sep 15, 2024 · 4f53570 · 4f53570
1 parent 2f62061
commit 4f53570
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 26 deletions.
diff --git a/src/components/FeaturePanel/ImagePane/Gallery.tsx b/src/components/FeaturePanel/ImagePane/Gallery.tsx
@@ -9,6 +9,7 @@ import { InfoButton } from './Image/InfoButton';
 import { PathsSvg } from './PathsSvg';
 import { Image } from './Image';
 import { SeeMoreButton } from './SeeMore';
+import { calculateImageSize } from './helpers';
 
 type GalleryProps = {
   def: ImageDef;
@@ -68,13 +69,7 @@ const GallerySlot: React.FC<GallerySlotProps> = ({
       ref={imgRef}
     >
       {hasPaths && imgRef.current && (
-        <PathsSvg
-          def={def}
-          size={{
-            width: imgRef.current.width,
-            height: imgRef.current.height,
-          }}
-        />
+        <PathsSvg def={def} size={calculateImageSize(imgRef.current)} />
       )}
     </Image>
   );

diff --git a/src/components/FeaturePanel/ImagePane/Image.tsx b/src/components/FeaturePanel/ImagePane/Image.tsx
@@ -42,7 +42,7 @@ const MainImg = React.forwardRef<
       style={{
         objectFit: 'contain',
         height: '100%',
-        width: 'auto',
+        width: '100%',
         display: 'inline-block',
       }}
       loading="lazy"

diff --git a/src/components/FeaturePanel/ImagePane/PathsSvg.tsx b/src/components/FeaturePanel/ImagePane/PathsSvg.tsx
@@ -18,29 +18,18 @@ import { Size } from './types';
 import { useFeatureContext } from '../../utils/FeatureContext';
 import { getKey } from '../../../services/helpers';
 
-const StyledSvg = styled.svg`
+const StyledSvg = styled.svg<{ size: Size }>`
   position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 100%;
   pointer-events: none;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: ${({ size }) => `${size.width}px`};
+  height: ${({ size }) => `${size.height}px`};
 `;
 
 const Svg = ({ children, size }) => (
-  <StyledSvg
-    viewBox={`0 0 ${size.width} ${size.height}`}
-    preserveAspectRatio="none" // when we load image we overlay and stretch the svg
-    style={{
-      display: 'absolute',
-      top: 0,
-      bottom: 0,
-      left: '50%',
-      transform: 'translateX(-50%)',
-      width: `${size.width}px`,
-      height: `${size.height}px`,
-    }}
-  >
+  <StyledSvg size={size} viewBox={`0 0 ${size.width} ${size.height}`}>
     {children}
   </StyledSvg>
 );

diff --git a/src/components/FeaturePanel/ImagePane/helpers.tsx b/src/components/FeaturePanel/ImagePane/helpers.tsx
@@ -30,3 +30,26 @@ export const isElementVisible = (element: HTMLElement) => {
     rect.right <= (window.innerWidth || document.documentElement.clientWidth)
   );
 };
+
+/**
+ * Calculates the displayed size of an image while maintaining its aspect ratio,
+ * based on the container's dimensions. This is useful when using `object-fit: cover`.
+ */
+export function calculateImageSize(img: HTMLImageElement) {
+  const { naturalWidth, naturalHeight, clientWidth, clientHeight } = img;
+
+  const imageAspectRatio = naturalWidth / naturalHeight;
+  const containerAspectRatio = clientWidth / clientHeight;
+
+  if (containerAspectRatio > imageAspectRatio) {
+    return {
+      width: clientHeight * imageAspectRatio,
+      height: clientHeight,
+    };
+  }
+
+  return {
+    width: clientWidth,
+    height: clientWidth / imageAspectRatio,
+  };
+}