xiaoxue_admin
/
xLog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: unexpected size for small image

This commit is contained in:
DIYgod 2022-09-29 18:49:47 +01:00
parent 914a843170
commit b857a13b62
No known key found for this signature in database
GPG Key ID: D159328F47A80DCA
1 changed files with 35 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/ui/Image.tsx
View File

@ -14,33 +14,46 @@ export const Image: React.FC<
> = ({ layout, className, alt, src, width, height, ...props }) => {
src = toIPFS(src)
const [paddingTop, setPaddingTop] = React.useState("0")
const [autoWidth, setAutoWidth] = React.useState(0)
const autoSize = !width && !height && !layout
return (
<span
className={clsx(
"inline-flex justify-center",
autoSize ? "relative w-full h-full" : "",
)}
style={autoSize ? { paddingTop } : {}}
className="inline-block w-full h-full"
style={
autoSize
? {
maxWidth: `${autoWidth}px`,
}
: {}
}
>
<NextImage
{...props}
src={toGateway(src, {
forceFallback: true,
})}
className={className}
alt={alt}
width={width}
height={height}
layout={autoSize ? "fill" : layout}
onLoad={({ target }) => {
if (autoSize) {
const { naturalWidth, naturalHeight } = target as HTMLImageElement
setPaddingTop(`calc(100% / (${naturalWidth} / ${naturalHeight})`)
}
}}
/>
<span
className={clsx(
"inline-flex justify-center",
autoSize ? "relative w-full h-full" : "",
)}
style={autoSize ? { paddingTop } : {}}
>
<NextImage
{...props}
src={toGateway(src, {
forceFallback: true,
})}
className={className}
alt={alt}
width={width}
height={height}
layout={autoSize ? "fill" : layout}
onLoad={({ target }) => {
if (autoSize) {
const { naturalWidth, naturalHeight } = target as HTMLImageElement
setPaddingTop(`calc(100% / (${naturalWidth} / ${naturalHeight})`)
setAutoWidth(naturalWidth)
}
}}
/>
</span>
</span>
)
}