github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-05-18 03:10:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): center images in RTL layouts (#27678) (#27753)

Browse Source
This commit is contained in:
Nicolas-micuda-becker
2026-04-13 20:29:35 +02:00
committed by GitHub
parent 9c9feddf7d
commit d377d2e145
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/AdaptiveImage.svelte
+9 -3
View File
@@ -98,13 +98,13 @@
return { width: 1, height: 1 }; return { width: 1, height: 1 };
}); });
const { width, height, left, top } = $derived.by(() => { const { width, height, insetInlineStart, top } = $derived.by(() => {
const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit; const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
const { width, height } = scaleFn(imageDimensions, container); const { width, height } = scaleFn(imageDimensions, container);
return { return {
width: width + 'px', width: width + 'px',
height: height + 'px', height: height + 'px',
left: (container.width - width) / 2 + 'px', insetInlineStart: (container.width - width) / 2 + 'px',
top: (container.height - height) / 2 + 'px', top: (container.height - height) / 2 + 'px',
}; };
}); });
@@ -151,7 +151,13 @@
<div class="relative h-full w-full overflow-hidden will-change-transform" bind:this={ref}> <div class="relative h-full w-full overflow-hidden will-change-transform" bind:this={ref}>
{@render backdrop?.()} {@render backdrop?.()}
<div class="absolute inset-0 pointer-events-none" style:left style:top style:width style:height> <div
class="absolute inset-0 pointer-events-none"
style:inset-inline-start={insetInlineStart}
style:top
style:width
style:height
>
{#if show.alphaBackground} {#if show.alphaBackground}
<AlphaBackground /> <AlphaBackground />
{/if} {/if}