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

Question

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

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

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

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

Answer 1

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

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

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

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;
  }
}