From 31dfdf5ee0aa3377b2707472f6c4e15d4dbaa37e Mon Sep 17 00:00:00 2001
From: Azat Ismagilov <azatismagilov00@gmail.com>
Date: Wed, 2 Aug 2023 00:38:14 +0200
Subject: [PATCH] Adjust Lightbox layout in proportion to the image aspect
 ratio, fixes #4

The Lightbox component now adjusts the width of the FacesWrapper div based on the aspect ratio of the image, ensuring that faces are accurately positioned relative to the image's dimensions. The div is now centered horizontally within the Lightbox container.
---
 src/components/Body/Lightbox.jsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/Body/Lightbox.jsx b/src/components/Body/Lightbox.jsx
index 9970304..1a98155 100644
--- a/src/components/Body/Lightbox.jsx
+++ b/src/components/Body/Lightbox.jsx
@@ -27,9 +27,15 @@ const Lightbox = ({
     const [face, setFace] = useState(null);
     const imgRef = useRef(null);
 
-    const Faces = styled.div`
-        width: ${imgRef?.current?.width}px;
+    const aspectRatio = (imgRef) => imgRef?.current?.naturalWidth / imgRef?.current?.naturalHeight;
+
+    const FacesWrapper = styled.div`
+        width: ${aspectRatio(imgRef) * imgRef?.current?.height}px;
         height: ${imgRef?.current?.height}px;
+        margin-left: auto;
+        margin-right: auto;
+        left: 0;
+        right: 0;
         position: absolute;
     `;
 
@@ -42,12 +48,12 @@ const Lightbox = ({
                     src={photo.url}
                     alt={"fullsize"}
                 />
-                <Faces>
+                <FacesWrapper>
                     {photoInfo?.person?.map(person =>
-                        (<FaceDiv imgRef={imgRef} person={person}
+                        (<FaceDiv person={person}
                             face={face} setFace={setFace}
                             key={person.name + "facediv" + person.position.top} />))}
-                </Faces>
+                </FacesWrapper>
             </div>
             <Control />
             <PhotoInfo photo={photo} photoInfo={photoInfo} setFace={setFace} />