必须给父容器设明确宽高再配object-fit: cover——img需width:100%;height:100%;object-fit:cover;object-position:center；背景图方案用background-size:cover+明确容器高度；小屏裁切需靠媒体查询调aspect-ratio。
用 object-fit: cover 配合固定宽高容器最直接
这不是“能不能”的问题，而是“必须这么配”——object-fit: cover 单独写在 img 上基本无效，因为图片容器高度塌陷后，裁剪失去参照。必须给父容器设明确的 width 和 height（比如 height: 50vh 或 aspect-ratio: 16/9），再让 img 填满它：
-
img设width: 100%; height: 100%; object-fit: cover; object-position: center; - 别漏掉
object-position: center，虽然默认是 center，但显式声明能避免某些老版 Safari 的解析偏差 - 如果小屏要更聚焦人脸，可改
object-position: center top，把顶部对齐优先
背景图方案：用 background-size: cover + background-position: center
适合纯装饰性 Banner，语义不重要、不需 SEO 或 alt 文本时更灵活。但有硬性前提：容器必须有明确高度，否则背景图直接消失。
- 容器加
height: 100vh或min-height: 400px或aspect-ratio: 16/9 - CSS 写成：
background: url(...) center / cover no-repeat;（注意简写顺序不能错） - 移动端若发现裁剪偏移，加
overflow: hidden禁用横向滚动条，防止用户误拖拽看到不该露的部分 - 慎用
background-attachment: fixed，iOS Safari 在页面滚动时容易触发重绘抖动
小屏幕裁切量不可控？用媒体查询微调容器尺寸
object-fit: cover 和 background-size: cover 本身不响应屏幕尺寸变化——它们只保证“填满”，不控制“裁多少”。真要让小屏多裁、大屏少裁，得动容器本身。
- 桌面端：
.banner { aspect-ratio: 1920/600; } - 小屏加媒体查询：
@media (max-width: 768px) { .banner { aspect-ratio: 375/400; } }（数值按设计稿主视觉区域反推） - 老浏览器不支持
aspect-ratio？用padding-top百分比 hack 替代，但需额外 wrapper 元素 - 别试图用
max-width控制裁切——它只限制宽度，不影响裁剪逻辑
常见失效原因：图片没设 max-width: 100% 或容器溢出
即使用了 cover，小屏下仍出现横向滚动条或图片拉伸，八成是这两处漏了。
立即学习“前端免费学习笔记（深入）”；
-
img必须加max-width: 100%; height: auto;，否则原始大图会撑破容器 - 父容器外层（比如
.banner-wrapper）要加overflow-x: hidden;，不然position: absolute或负left会导致内容溢出 - 如果 Banner 是 Flex/Grid 子项，检查是否写了
flex: 1或grid-column: 1 / -1—— 这些会让子项强行占满，无视父容器的max-width或aspect-ratio
cover 写不写，而是容器有没有高度、溢出有没有截断、裁切锚点有没有按场景调整——三者缺一，小屏就还是会偏、会糊、会滚。 
