移动端h5全屏背景图需确保关键内容可见，核心是cover裁剪+焦点定位+屏幕比例适配；推荐background-size:cover+background-position配合aspect-ratio媒体查询动态调整焦点，并预留安全区域，或改用object-fit:cover的img方案。
移动端全屏背景图在 H5 中最常遇到的问题是：图片被拉伸变形，或关键内容（如人脸、产品主体）被裁掉。解决核心不是“让图填满”，而是“让图的关键部分始终可见”。这需要结合 cover 裁剪逻辑 + 焦点定位控制 + 适配不同屏幕比例 三者协同。
用 background-size: cover + background-position 居中基础适配
这是最通用的起点，适用于大多数横竖屏混合场景：
- 设置
background-size: cover，确保图片完全覆盖容器且不拉伸 - 搭配
background-position: center center，默认以图片中心为裁剪锚点 - 容器需设为
width: 100vw; height: 100vh;或至少height: 100vh保证全屏高度 - 注意：若原图主体偏上（如人像站立），仅靠 center center 在竖屏下容易切掉头顶——这时就要进阶调整
按屏幕宽高比动态调整裁剪焦点
单纯用 max-width 或 min-width 媒体查询不够精准，推荐用 aspect-ratio 查询更可靠：
-
@media (min-aspect-ratio: 1/1)：匹配正方形及更宽的屏幕（如多数横屏、平板），可设background-position: center center -
@media (max-aspect-ratio: 4/5)：匹配典型竖屏手机（如 iPhone 13/14/15），若人物在原图偏上，改用background-position: center top -
@media (min-aspect-ratio: 16/9), (max-aspect-ratio: 21/9)：覆盖刘海屏、挖孔屏等超宽屏，可微调为center 20%防止顶部状态栏遮挡关键信息
预留安全区域，倒逼设计配合
技术再强也难救一张构图差的图。实际开发中建议和 UI 明确约定：
- 背景图最小尺寸建议 ≥ 1200×2000px（宽高比 ≤ 0.6），留出上下左右至少 15% 的可裁空间
- 重要内容（文字、人脸、LOGO）必须落在“安全框”内：以图片中心为原点，向四周延伸 30% 范围（即 40%×40% 中心区）
- 避免把关键元素紧贴图片边缘——竖屏下极易被裁光
替代方案：用 img 标签 + object-fit 替代背景图
当需要语义化、SEO 或响应式 srcset 支持时，优先用 <img>：
- 给
img设固定容器尺寸（如height: 100vh; width: 100%;），并加object-fit: cover - 用
object-position控制焦点，值法与background-position一致（如center top） - 注意：
img必须是块级元素（display: block），否则object-fit和object-position可能不生效 - 优势：支持
alt、srcset、懒加载，无障碍友好；劣势：不如背景图灵活叠加遮罩层
