移动端头图美观关键在于「智能视觉裁剪」：用 media query + background-size: cover + background-position 微调焦点，结合 aspect-ratio 保比例，服务端预裁剪作兜底。
移动端个人主页头图在不同屏幕高度下保持美观，关键不是固定裁剪，而是用媒体查询配合 object-fit 和容器约束实现「智能视觉裁剪」——即让图片在不同设备高度下始终居中显示关键区域（如人脸/主视觉），不拉伸、不留白、不溢出。
用 min-height + object-fit: cover 控制基础裁剪
头图容器设为固定宽高比（如 16:9 或全屏宽+动态高），再用 object-fit: cover 让图片等比缩放并填满，超出部分自动裁剪：
.header-bg {
width: 100%;
min-height: 50vh; /* 最小占屏50%，适配小屏 */
background-image: url('banner.jpg');
background-size: cover;
background-position: center center; /* 关键：确保人脸居中 */
background-repeat: no-repeat;
}注意：background-size: cover 本身就有裁剪效果，比 img + object-fit 更易控制定位，适合头图这类装饰性图片。
按屏幕高度分段设置 min-height 和 background-position
针对明显高度差异的设备（如 iPhone SE 小屏 vs iPad 竖屏），用媒体查询微调裁剪区域：
-
小屏（≤ 600px 高）：提高
min-height（如 60vh），避免头图过矮；background-position: center 30%把焦点上移，突出人脸 -
中屏（601px–800px）：用默认
center center，平衡构图 -
大屏高屏（> 800px）：设
min-height: 70vh，并加background-position: center 50%防止头顶被切太多
结合 aspect-ratio 保证横纵比稳定（现代方案）
若需严格维持头图比例（比如 375×210 像素对应 16:9），可用 CSS aspect-ratio 配合媒体查询：
.header-bg {
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
}
<p>@media (max-height: 667px) {
.header-bg { background-position: center 25%; }
}
@media (min-height: 812px) {
.header-bg { aspect-ratio: 9 / 16; } /<em> 某些竖长屏可切换为 9:16 </em>/
}注意：aspect-ratio 兼容性良好（Chrome 88+/Safari 15.4+/Firefox 89+），H5 场景可放心使用；旧浏览器可 fallback 到 padding-top 百分比占位。
图片服务端预裁剪作为兜底（推荐）
纯 CSS 裁剪依赖用户设备尺寸，无法精准控制人脸位置。更稳妥的做法是：
- 上传头图时，用工具（如 Cloudinary、阿里云 IMG）指定焦点坐标（x,y）做智能裁剪
- H5 中通过 URL 参数加载已裁剪图：
banner.jpg?crop=face&gravity=face - 再叠加一层 CSS 裁剪作二次微调，双重保障
这样即使用户用奇怪分辨率访问，关键内容也不会被误切。
