如何根据屏幕宽度调整NextJS Image组件的高度？

方案1：结合CSS媒体查询实现（最简便，无需额外JS逻辑） #

给Image组件添加自定义类名，通过CSS媒体查询覆盖移动端高度即可，调整后代码如下：

1. 组件代码修改：

<Image 
  src={imageLink} 
  width="1920" 
  height="512" 
  alt="Hero Image"
  className="hero-image"
/>

2. 对应的CSS代码：

@media (max-width: 750px) {
  .hero-image {
    height: 612px !important;
    /* 避免图片拉伸可以额外加下面这行 */
    object-fit: cover;
  }
}

方案2：JS监听视口宽度动态传参（适合需要灵活控制逻辑的场景） #

如果不想用!important覆盖默认样式，可以通过React hooks监听窗口宽度，动态传入height参数：

// 如果你用Next.js 13+ App Router，需要先加 'use client' 标记为客户端组件
'use client'
import { useState, useEffect } from 'react';
import Image from 'next/image';

const YourComponent = () => {
  const [imageHeight, setImageHeight] = useState(512);

  useEffect(() => {
    const handleResize = () => {
      setImageHeight(window.innerWidth > 750 ? 512 : 612);
    };
    // 初始化执行一次匹配当前视口尺寸
    handleResize();
    window.addEventListener('resize', handleResize);
    // 组件卸载清除监听避免内存泄漏
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <Image 
      src={imageLink} 
      width="1920" 
      height={imageHeight} 
      alt="Hero Image"
    />
  )
}

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