fix(slideshow): fill the viewport instead of black bars
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:
@@ -278,9 +278,13 @@ export function SlideshowPage() {
|
||||
const imgStyle = (buf: 0 | 1): React.CSSProperties => {
|
||||
const isActive = active === buf;
|
||||
const style: React.CSSProperties = {
|
||||
maxWidth: '100%',
|
||||
maxHeight: '100%',
|
||||
objectFit: 'contain',
|
||||
// Fill the whole viewport. `maxWidth/maxHeight` alone left the <img> at
|
||||
// the photo's intrinsic size (e.g. the 1920px preview), so it never
|
||||
// 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),
|
||||
};
|
||||
if (settings.transition === 'kenburns' && isActive) {
|
||||
|
||||
Reference in New Issue
Block a user