在Nextjs中Image组件宽度自适应和高度自适应

原创已于 2025-02-25 11:53:19 修改 · 657 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端 #javascript

于 2024-11-24 18:36:57 首次发布

Next 专栏收录该内容

2 篇文章

订阅专栏

文档：

Components: <Image> | Next.js

指定高度，宽度自适应：

<div className="w-[600px] h-[300px] bg-rose-950">
  <Image alt="test" src={"/2x3.png"} width={395} height={265}
         style={{
           width: 'auto',
           height: '100%',
           // objectFit: 'cover', 不希望拉伸图片而是裁剪
         }}
  />
</div>

指定宽度，高度自适应

<div className="w-[200px] h-[255px] bg-rose-400">
  <Image alt="test" src={"/2x3.png"} width={395} height={265}
         style={{
           width: '100%',
           height: 'auto',
           // objectFit: 'cover', 不希望拉伸图片而是裁剪
         }}
  />
</div>