paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix(slideshow): fill the viewport instead of black bars

Browse Source 
The slide <img> used maxWidth/maxHeight:100% with no width/height, so it
rendered at the photo's intrinsic size (e.g. the 1920px preview) and never
scaled up to the projector, leaving black bars all around. Pin the image to
100% x 100% and use object-fit: cover so it fills the whole page.
This commit is contained in:
Luca
2026-06-20 02:33:26 +02:00
parent 0f4388d68a
commit 6ec46de0e7
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/gallery/SlideshowPage.tsx
+7 -3
View File
@@ -278,9 +278,13 @@ export function SlideshowPage() {
const imgStyle = (buf: 0 | 1): React.CSSProperties => { const imgStyle = (buf: 0 | 1): React.CSSProperties => {
const isActive = active === buf; const isActive = active === buf;
const style: React.CSSProperties = { const style: React.CSSProperties = {
maxWidth: '100%', // Fill the whole viewport. `maxWidth/maxHeight` alone left the <img> at
maxHeight: '100%', // the photo's intrinsic size (e.g. the 1920px preview), so it never
objectFit: 'contain', // scaled up to the projector — leaving black bars all round. Pin to the
// full container and let object-fit do the scaling.
width: '100%',
height: '100%',
objectFit: 'cover',
filter: imageFilter(settings.colorfilter), filter: imageFilter(settings.colorfilter),
}; };
if (settings.transition === 'kenburns' && isActive) { if (settings.transition === 'kenburns' && isActive) {