使用 Next.js 的 next/Image 组件时，若固定父容器高度（如 h-[476px]）会导致图片在移动端被拉伸变形；通过 CSS 的 object-fit 属性（推荐 cover 或 contain）可确保图片按比例缩放并适配不同屏幕。

使用 next.js 的 `next/image` 组件时，若固定父容器高度（如 `h-[476px]`）会导致图片在移动端被拉伸变形；通过 css 的 `object-fit` 属性（推荐 `cover` 或 `contain`）可确保图片按比例缩放并适配不同屏幕。

在 Next.js 中使用 配合 fill 模式时，组件会铺满其定位上下文（position: relative 的父容器），但默认行为不会自动处理宽高比适配——尤其当父容器设为固定高度（如 h-[476px]）时，图片容易在小屏幕下被强制拉伸、裁剪失当或留白过多。

✅ 正确做法是：为 next/Image 添加 className，显式设置 object-fit 及相关属性：

<div classname="relative w-full h-[476px] md:h-[500px]">
  <image src="/banner.jpg" alt="Banner" fill classname="object-cover" sizes="(max-width: 768px) 100vw, 1200px"></image>
</div>

? 关键说明：

• object-cover：图片等比缩放并填满容器，超出部分被裁剪——适合横幅类 banner，视觉冲击强，但需确保核心内容位于安全区域（建议图片构图预留“移动端安全边距”）；
• object-contain：图片等比缩放并完全可见，居中显示，容器内可能出现上下/左右空白——适合 Logo、图标等需完整展示的场景；
• 移除硬编码高度（如 h-[476px]）可进一步提升响应性：改用 min-h-[476px] 或结合 aspect-video / aspect-[16/9] 等 Tailwind 响应式宽高比工具类；例如：

<div classname="relative w-full min-h-[476px] md:min-h-[500px] aspect-video md:aspect-[2.5/1]">
  <image src="/banner.jpg" alt="Banner" fill classname="object-cover" priority></image>
</div>

⚠️ 注意事项：

• fill 模式下，width 和 height prop 必须省略，否则会报错；
• 始终为 设置 alt 属性以满足可访问性要求；
• 若 banner 内容含重要文字，请在设计阶段测试 object-cover 在主流设备宽度（320px–428px）下的裁剪效果，必要时提供 srcSet 或使用 picture + source 进行艺术指导（art direction）。

通过合理组合 fill、object-fit 和响应式容器类，即可实现 banner 图片在桌面端饱满、移动端不失真、全设备自然缩放的专业效果。