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

学途路漫漫

已于 2025-02-25 11:53:19 修改

阅读量419

点赞数 2

分类专栏： Next 文章标签： java 前端 javascript

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

本文链接：https://blog.csdn.net/csdn1940879828/article/details/144010443

版权

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>