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