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.
icpc · Aug 1, 2023 · 31dfdf5 · 31dfdf5
1 parent 00dd196
commit 31dfdf5
Showing 1 changed file with 11 additions and 5 deletions.
diff --git 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} />