sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve image display and aspect ratio in the photo gallery

Browse Source 
Adjust the lightbox component in the photo gallery to use `object-cover` with a 1:1 aspect ratio for images, ensuring they fill the container without borders.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: e6b6dd7d-21a9-4ab3-8808-323e8219bdad
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/drGbo1a
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 21:03:19 +00:00
parent dca73b8990
commit 466a72c2b6
2 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772312588720.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 268 KiB

4
client/src/components/photo-gallery.tsx
View File

@ -63,11 +63,11 @@ function Lightbox({
<ChevronRight className="w-10 h-10" />
</button>
<div className="max-w-[90vw] max-h-[85vh] flex items-center justify-center" onClick={(e) => e.stopPropagation()}>
<div className="w-[85vh] h-[85vh] max-w-[95vw] max-h-[95vw] flex items-center justify-center" onClick={(e) => e.stopPropagation()}>
<img
src={images[index].large}
alt={images[index].fileName}
className="max-w-full max-h-[85vh] object-contain rounded-lg"
className="w-full h-full object-cover rounded-lg"
data-testid="img-lightbox"
/>
</div>