如何根据屏幕宽度改变NextJS Image标签的高度？

Question

我正在使用 next/image 来渲染我的图像，如下所示：

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

这对于 750 像素以上的屏幕宽度来说是很好的。

当用户在手机或平板电脑上（屏幕宽度750px以下）访问时，如何将高度更新为“612”？

Answer 1

将 Image 放入 div 中，并在 Image 上放置以下 props：

<div className="div-class">
   <Image src={imageLink} layout="fill" objectFit="cover" />
</div>

本例中的 div 需要具有position: relative. 现在，您可以通过媒体查询为该 div 提供所需的任何高度/宽度

Answer 2

2023 年，随着 NextJS 13，Image-API 发生了变化。使用 NextJS 13 的新应用程序目录和新命名约定，这就是我为完成请求的行为所做的操作：

// page.jsx

import styles from './page.module.css';
import logo from '../public/logo.png';

export default function Home() {
  return (
    <div className={styles.logoContainer}>
      <Image src={logo} alt='Argo Logo' fill />
    </div>
  );
}

// page.jsx

import styles from './page.module.css';
import logo from '../public/logo.png';

export default function Home() {
  return (
    <div className={styles.logoContainer}>
      <Image src={logo} alt='Argo Logo' fill />
    </div>
  );
}