background-size: cover 会裁切图片是因为其设计逻辑是等比缩放至完全覆盖容器，宽高比不匹配时必有部分内容被裁；可通过 background-position 调整显示区域，并配合媒体查询、多图适配及性能优化提升可控性。
background-size: cover 为什么有时图片还是被裁切？
因为 cover 的逻辑是「等比缩放图片，直到完全覆盖容器」，它不保证显示全部内容——只要宽高比和容器不一致，必然有部分被裁掉。这不是 bug，是设计行为。常见于全屏轮播图、登录页背景，你看到的“被切掉头顶”或“看不见脚”就是这个原因。
- 检查容器本身是否设置了固定宽高比（比如
aspect-ratio: 16/9），否则在不同设备上容器高度可能塌陷，导致裁切位置不可控 - 确保父容器有明确高度，比如
min-height: 100vh，而不是仅靠内容撑开 - 如果用在
或上，注意移动端 safari 的 viewport 缩放可能干扰实际渲染尺寸
如何让 cover 效果更可控？加 background-position 是关键
background-position 决定了「哪一部分居中显示」。默认是 50% 50%（居中），但很多场景需要微调——比如人物脸部常在画面下半部，直接居中容易切掉脸。
- 常用组合：
background-position: center top（顶部对齐，适合展示天空/标题区域） - 精准控制：
background-position: 50% 30%（垂直方向往上偏移，把重要内容往可视区拉） - 避免写死像素值，百分比或关键词更适配响应式
cover 在小屏幕竖屏下特别容易出问题？试试配合媒体查询
手机竖屏时，屏幕又高又窄，而多数背景图是横构图（16:9），cover 会拼命拉高图片，结果上下大片被裁。这时可以换策略：
- 在小屏改用
background-size: contain，确保完整显示，但会有留白 - 或用媒体查询切换不同背景图：
@media (max-width: 768px) { background-image: url('bg-mobile.jpg'); } - 更稳妥的做法：服务端或构建时生成多张适配图，用
srcset控制，css 只负责 fallback
兼容性与性能提醒：cover 不是万能解药
background-size: cover 在 IE9+ 和所有现代浏览器都支持，但要注意两个隐性成本：
立即学习“前端免费学习笔记（深入）”；
- 大图在低端安卓机上可能触发重绘卡顿，建议压缩到 200KB 以内，且用
image-rendering: -webkit-optimize-contrast减少缩放模糊 - 如果同时用了
background-attachment: fixed，在 ios Safari 中会强制启用硬件加速，反而导致滚动掉帧 - 不要在多个嵌套层级都设
cover背景，叠加计算会让渲染变慢
真正难的不是写上 cover，而是预判它在各种 viewport 下裁哪里、留什么——得盯着真机反复调 background-position，再配上合适的断点图。