如何使用 next

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 文件时使用插件，如此处所述。