如何为Next.js的Image组件设置height:100vh、width:auto？

我尝试了各种方法，想让Next.js的Image组件实现height:100vh、width:auto的效果，查阅了官方文档及layout属性相关示例，但都不适用。目标效果是图片高度占满视口，宽度自适应按比例缩放。

我的Next.js代码及样式 #

JSX代码 #

import img6 from "./image.jpg";
import styles from "../styles/slider.module.css";

export default function about() {
  return (
    <>
      <div className={styles.slider}>
        <Image
          alt=""
          src={img6}
          // layout="responsive"
          // layout="fill"
          // objectFit="cover"
          className={styles.image}
          // style={{ height: "100vh" }}
          // width="300px"
          // height="100%"
        />
      </div>
    </>
  );
}

CSS样式 #

.slider {
  display: block;
  height: 100vh;
}

.image {
  height: 100vh;
  width: auto;
}

原生HTML实现的效果（可正常工作） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .img{
            height: 100vh;
        }
    </style>
</head>
<body>
<img src="http://placeimg.com/640/480/animals/sepia" alt="" class="img">
</body>
</html>

原因分析 #

Next.js的Image组件（尤其是v12及之前版本）默认会基于图片原始尺寸强制设置width和height属性，且内部布局逻辑（比如layout属性的约束）会优先于自定义CSS样式生效，导致原生图片的“高度固定、宽度自适应”行为无法直接实现。

解决方案 #

方法1：Next.js 13+ App Router版本 #

新版Image组件简化了布局逻辑，支持直接自定义样式：

import img6 from "./image.jpg";
import styles from "../styles/slider.module.css";
import Image from 'next/image';

export default function about() {
  return (
    <>
      <div className={styles.slider}>
        <Image
          alt=""
          src={img6}
          className={styles.image}
          sizes="100vw"
        />
      </div>
    </>
  );
}

CSS保持你原来的写法即可：

.slider {
  display: block;
  height: 100vh;
}

.image {
  height: 100vh;
  width: auto;
}

方法2：Next.js v12及旧版 #

借助layout="fill"和父容器定位实现：

.slider {
  display: block;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.image {
  object-fit: contain;
}

import img6 from "./image.jpg";
import styles from "../styles/slider.module.css";
import Image from 'next/image';

export default function about() {
  return (
    <>
      <div className={styles.slider}>
        <Image
          alt=""
          src={img6}
          layout="fill"
          className={styles.image}
        />
      </div>
    </>
  );
}

方法3：应急方案（用原生img标签） #

如果不需要Next.js Image的优化特性，直接用原生<img>标签，就能像你示例中那样实现效果，但会失去自动格式转换、懒加载等功能。

内容的提问来源于stack exchange，提问作者staschek