Merge pull request #10 from icpc:azat-ismagilov/issue4

Adjust Lightbox layout in proportion to the image aspect ratio, fixes #4
icpc · Aug 1, 2023 · 9c727db · 9c727db
2 parents 00dd196 + 31dfdf5
commit 9c727db
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} />