Fix images size (#5750)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
This commit is contained in:
Kristina 2024-06-07 13:28:10 +04:00 committed by GitHub
parent ba5b0749bc
commit 7433a23728
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -100,21 +100,24 @@
return 'x-large'
}
function toStyle (size: 'auto' | number): string {
return size === 'auto' ? 'auto' : `${size}px`
}
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
{#await getBlobRef(value.$lookup?.file, value.file, value.name, sizeToWidth(urlSize)) then blobSrc}
<img
src={blobSrc.src}
style:object-fit={getObjectFit(dimensions)}
width={dimensions.width}
height={dimensions.height}
srcset={blobSrc.srcset}
alt={value.name}
/>
{/await}
<div class="container" style="width:{toStyle(dimensions.width)}; height:{toStyle(dimensions.height)}">
{#await getBlobRef(value.$lookup?.file, value.file, value.name, sizeToWidth(urlSize)) then blobSrc}
<img
src={blobSrc.src}
style:object-fit={getObjectFit(dimensions)}
width={dimensions.width}
height={dimensions.height}
srcset={blobSrc.srcset}
alt={value.name}
/>
{/await}
</div>
<style lang="scss">
img {
@ -125,4 +128,8 @@
min-height: 4rem;
min-width: 4rem;
}
.container {
display: inline-flex;
}
</style>