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

Question

我正在使用 next/image 来渲染我的图像：

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

这适用于 750 像素以上的屏幕宽度。

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

Answer 1

将图片放入 div 并在图片上放置以下道具：

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

本例中的div需要有position: relative。现在你可以给这个 div 任何你需要的 height/width 媒体查询

Answer 2

您创建一个 css class（在您的 custom.css 或任何地方）

然后您定义props您需要的（高度、样式等）

@media (min-width: 576px) {
  .custom_class {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .custom_class {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .custom_class {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .custom_class {
    max-width: 1140px;
  }
}