object-fit: cover 是解决 banner 图片拉伸变形的有效方法，需配合父容器明确宽高、使用 <img> 标签、设置 object-position 微调裁剪焦点，并确保 viewport 元标签正确。
用 object-fit: cover 是解决 banner 图片在不同设备上拉伸变形、比例不一致的常用且有效方法，但关键在于正确搭配容器设置，否则可能失效或出现裁剪异常。
确保父容器有明确宽高约束
banner 容器（比如 <div class="banner">）必须设定明确的宽高，否则 object-fit: cover 无法按预期裁切填充。常见错误是只设宽度（如 width: 100%），高度依赖图片自身，导致响应式时比例飘移。
- 推荐写法：
height: 40vh或aspect-ratio: 16/9（现代浏览器支持） - 兼容旧版可结合
padding-top响应式占位（如padding-top: 56.25%对应 16:9） - 避免
height: auto或未设高度的弹性容器直接套用object-fit
图片需作为 <img> 标签使用（非 background-image）
object-fit 只对替换元素（如 <img>、<video>）生效，不能用于 CSS 背景图。若当前用 background-image 实现 banner，需改用语义化 <img> 标签才能启用该属性。
- HTML 示例：
<div class="banner"><img src="banner.jpg" alt="横幅"></div> - CSS 示例：
.banner img { width: 100%; height: 100%; object-fit: cover; } - 若必须用背景图，可用
background-size: cover替代，但失去 img 的语义与 SEO 优势
配合媒体查询微调裁剪焦点（可选）
cover 会居中裁剪，但重要内容（如人脸、Logo）可能被切掉。可通过 object-position 调整焦点，再结合媒体查询适配不同断点。
立即学习“前端免费学习笔记（深入）”；
- 默认居中：
object-position: center center - 想突出左侧内容：
object-position: left center - 在小屏上重新定位：
@media (max-width: 768px) { .banner img { object-position: top; } }
注意移动端缩放与视口设置
即使样式正确，若页面缺少 viewport 元标签，iOS/Android 浏览器可能强制缩放，导致 banner 显示异常。
- 务必在
<head>中加入：<meta name="viewport" content="width=device-width, initial-scale=1"> - 避免设置
user-scalable=no，影响可访问性 - 测试时用真机或 Chrome DevTools 的设备模拟器，勿仅依赖桌面缩放
基本上就这些。核心是：容器定高 + img 标签 + object-fit: cover + object-position 微调 + 正确 viewport。不复杂但容易忽略其中一环。
