使用 Next.js 的 next/Image 组件时，若固定父容器高度（如 h-[476px]）会导致图片在移动端被拉伸变形；通过 CSS 的 object-fit 属性（推荐 cover 或 contain）可确保图片按比例缩放并适配不同屏幕。
使用 next.js 的 `next/image` 组件时，若固定父容器高度（如 `h-[476px]`）会导致图片在移动端被拉伸变形；通过 css 的 `object-fit` 属性（推荐 `cover` 或 `contain`）可确保图片按比例缩放并适配不同屏幕。
在 Next.js 中使用 <image></image> 配合 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" // ✅ 关键：保持宽高比，覆盖整个区域（可能轻微裁剪）
// 或使用 className="object-contain" // ✅ 保持完整可见，居中显示，可能留白
sizes="(max-width: 768px) 100vw, 1200px"
/>
</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
/>
</div>⚠️ 注意事项：
-
fill模式下，width和heightprop 必须省略，否则会报错； - 始终为
<image></image>设置alt属性以满足可访问性要求； - 若 banner 内容含重要文字，请在设计阶段测试
object-cover在主流设备宽度（320px–428px）下的裁剪效果，必要时提供srcSet或使用picture+source进行艺术指导（art direction）。
通过合理组合 fill、object-fit 和响应式容器类，即可实现 banner 图片在桌面端饱满、移动端不失真、全设备自然缩放的专业效果。
