Ray*_*lez 7
结果出乎意料地难以完成,但我做到了。
function img({ src, width, height }) {
const style = { paddingBottom: `min(350px, ${100 / (width / height)}%)` }
return (
<div className={`next-image-wrapper`} style={style}>
<Image className="next-image" src={src} layout="fill" objectFit="contain" />
</div>
)
}
我使用next-image-wrapper
来设置正确的图像大小和比例,然后使用layout="fill" objectFit="contain"
来next-image
让图像填充包装器并发挥它的魔力。
next-image-wrapper
的宽度始终为 100%,填充容器。
填充用于设置包装器的高度。
对于宽幅和短幅图像,填充保持图像的纵横比,使其高度与宽度成正比。公式 ( 100 / (width / height)
) 使用原始图像的宽度和高度来计算填充应该有多大以保持纵横比。
对于又高又窄的图像,我使用 cssmin()
函数来确保上面计算的填充永远不会超过350px
. 这样,只要它在下面350px
,填充就保持成比例,然后它变成350px
. 此时,next-image 将自动将图像放入此高度的框内。
为了获得原始图像的宽度和高度,我rehype-img-size
在处理我的 mdx 文件时使用插件,如此处所述。
更多推荐
如何使用
发布评论