background-image + background-size: cover 是首屏大图最稳方案，需设容器高度、避免 overflow:hidden、注意 background-position 与布局干扰，并配合 preload 和 webp 优化性能。
用 background-image + background-size: cover 实现最稳的首屏大图
纯 img 标签在首屏大图场景下容易拉伸变形或留白，background-image 配合 background-size: cover 是更可控的选择。它能自动裁剪并填满容器，同时保持宽高比。
- 容器必须设明确高度（如
height: 100vh），否则背景图不显示 - 父元素不能有
overflow: hidden意外截断（尤其嵌套 flex 或 grid 时） - 如果用
background-position: center center，确保关键内容（比如人脸）落在图片中央区域，否则裁剪后可能丢失
.hero {
height: 100vh;
background-image: url('hero.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}响应式断点要覆盖主流设备宽度，别只写 max-width
仅靠 max-width 媒体查询在大屏 Retina 设备上会模糊——因为高分辨率屏幕仍加载低分辨率背景图。得配合 min-resolution 或 image-set()。
- 推荐用
srcset风格的 CSS 方案：background-image: image-set(...)（Chrome 83+、Safari 14.1+ 支持） - 兼容性要求高时，用媒体查询切换不同
background-imageURL，按min-width和min-resolution双条件判断 - 别忘了给
background-size: cover加前缀（-webkit-background-size），iOS Safari 旧版会失效
@media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
.hero {
background-image: url('hero@2x.jpg');
}
}居中失效？检查是否被 flex 或 position 干扰
很多人加了 background-position: center 还是偏左/偏上，问题常出在布局层：
-
父容器用了
display: flex但没设align-items: center和justify-content: center，而子元素是空 div，视觉上“没居中”立即学习“前端免费学习笔记（深入）”；
自己写了
position: absolute却漏了top: 50%; left: 50%; transform: translate(-50%, -50%)，此时background-position不起作用使用了
object-fit: cover在<img>上，但忘了设width: 100%; height: 100%，导致图片本身没撑满容器若用
<img>标签方案，必须同时设：width: 100%; height: 100vh; object-fit: cover; display: block;background-position: center只对背景图生效，对<img>内容无效
首屏性能：懒加载和预加载要取舍
首屏大图不该懒加载——用户打开页面第一眼就该看到，loading="lazy" 会明显延迟显示。但也不该让浏览器等它加载完才渲染文字。
- 用
<link rel="preload">提前抓取大图：<link rel="preload" as="image" href="hero.jpg"> - 图片格式优先选
webp（支持cover裁剪且体积小），降级 fallback 用jpg - 不要在 CSS 中用
@import引入含背景图的样式表，它会阻塞渲染
实际项目里，最常被忽略的是：没给大图设 width 和 height 的占位尺寸，导致 CLS（累积布局偏移）飙升。哪怕只是 aspect-ratio: 16/9，也比什么都不设强。
